Spice Cider カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Spice Cider palette

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

Spice Cider カラー パレット PNG 画像

Download spice cider color palette PNG image (landscape)
Download spice cider color palette PNG image (square)

Spice Cider カラーパレット CSS

/* CSS */
.color-1 {
color: #a15b30;
}
.color-2 {
color: #d57e48;
}
.color-3 {
color: #e3ba7d;
}
.color-4 {
color: #f4d19f;
}
.color-5 {
color: #f9e3d2;
}

/* CSS Variables */
:root {
--color-1: #a15b30;
 --color-2: #d57e48;
 --color-3: #e3ba7d;
 --color-4: #f4d19f;
 --color-5: #f9e3d2;
 }

Spice Cider の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a15b30, #d57e48, #e3ba7d, #f4d19f, #f9e3d2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a15b30, #d57e48, #e3ba7d, #f4d19f, #f9e3d2);
}

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

Spice Cider color palette created on .