Woodsy Calm カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Woodsy Calm palette

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

Woodsy Calm カラー パレット PNG 画像

Download woodsy calm color palette PNG image (landscape)
Download woodsy calm color palette PNG image (square)

Woodsy Calm カラーパレット CSS

/* CSS */
.color-1 {
color: #b7c9a1;
}
.color-2 {
color: #a6c4b7;
}
.color-3 {
color: #8dbf9c;
}
.color-4 {
color: #6c9d7b;
}
.color-5 {
color: #4f7d62;
}

/* CSS Variables */
:root {
--color-1: #b7c9a1;
 --color-2: #a6c4b7;
 --color-3: #8dbf9c;
 --color-4: #6c9d7b;
 --color-5: #4f7d62;
 }

Woodsy Calm の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b7c9a1, #a6c4b7, #8dbf9c, #6c9d7b, #4f7d62);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b7c9a1, #a6c4b7, #8dbf9c, #6c9d7b, #4f7d62);
}

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

Woodsy Calm color palette created on .