Sage Dream カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sage Dream palette

このパレットを共有する先：

Sage Dream カラー パレット PNG 画像

Download sage dream color palette PNG image (landscape)
Download sage dream color palette PNG image (square)

Sage Dream カラーパレット CSS

/* CSS */
.color-1 {
color: #b6c99c;
}
.color-2 {
color: #a2c3a7;
}
.color-3 {
color: #7db08d;
}
.color-4 {
color: #4d9982;
}
.color-5 {
color: #3e7975;
}

/* CSS Variables */
:root {
--color-1: #b6c99c;
 --color-2: #a2c3a7;
 --color-3: #7db08d;
 --color-4: #4d9982;
 --color-5: #3e7975;
 }

Sage Dream の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b6c99c, #a2c3a7, #7db08d, #4d9982, #3e7975);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b6c99c, #a2c3a7, #7db08d, #4d9982, #3e7975);
}

似たようなカラーパレット

Sage Dream color palette created on .