Woodbine カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Woodbine palette

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

Woodbine カラー パレット PNG 画像

Download woodbine color palette PNG image (landscape)
Download woodbine color palette PNG image (square)

Woodbine カラーパレット CSS

/* CSS */
.color-1 {
color: #8c5a2b;
}
.color-2 {
color: #9f512d;
}
.color-3 {
color: #d2691e;
}
.color-4 {
color: #f4a662;
}
.color-5 {
color: #ffd900;
}

/* CSS Variables */
:root {
--color-1: #8c5a2b;
 --color-2: #9f512d;
 --color-3: #d2691e;
 --color-4: #f4a662;
 --color-5: #ffd900;
 }

Woodbine の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #8c5a2b, #9f512d, #d2691e, #f4a662, #ffd900);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #8c5a2b, #9f512d, #d2691e, #f4a662, #ffd900);
}

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

Woodbine color palette created on .