Spite カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Spite palette

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

Spite カラー パレット PNG 画像

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

Spite カラーパレット CSS

/* CSS */
.color-1 {
color: #c72929;
}
.color-2 {
color: #e57171;
}
.color-3 {
color: #f06090;
}
.color-4 {
color: #bb69c9;
}
.color-5 {
color: #65b5f6;
}

/* CSS Variables */
:root {
--color-1: #c72929;
 --color-2: #e57171;
 --color-3: #f06090;
 --color-4: #bb69c9;
 --color-5: #65b5f6;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #c72929, #e57171, #f06090, #bb69c9, #65b5f6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #c72929, #e57171, #f06090, #bb69c9, #65b5f6);
}

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

Spite color palette created on .