Zion カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Zion palette

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

Zion カラー パレット PNG 画像

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

Zion カラーパレット CSS

/* CSS */
.color-1 {
color: #b94b4f;
}
.color-2 {
color: #f3b44f;
}
.color-3 {
color: #f3d57c;
}
.color-4 {
color: #4b9ea0;
}
.color-5 {
color: #6a3e79;
}

/* CSS Variables */
:root {
--color-1: #b94b4f;
 --color-2: #f3b44f;
 --color-3: #f3d57c;
 --color-4: #4b9ea0;
 --color-5: #6a3e79;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b94b4f, #f3b44f, #f3d57c, #4b9ea0, #6a3e79);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b94b4f, #f3b44f, #f3d57c, #4b9ea0, #6a3e79);
}

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

Zion color palette created on .