Heian Joy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Heian Joy palette

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

Heian Joy カラー パレット PNG 画像

Download heian joy color palette PNG image (landscape)
Download heian joy color palette PNG image (square)

Heian Joy カラーパレット CSS

/* CSS */
.color-1 {
color: #f5b042;
}
.color-2 {
color: #f0a800;
}
.color-3 {
color: #f4cf3e;
}
.color-4 {
color: #e77e23;
}
.color-5 {
color: #d15400;
}

/* CSS Variables */
:root {
--color-1: #f5b042;
 --color-2: #f0a800;
 --color-3: #f4cf3e;
 --color-4: #e77e23;
 --color-5: #d15400;
 }

Heian Joy の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5b042, #f0a800, #f4cf3e, #e77e23, #d15400);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5b042, #f0a800, #f4cf3e, #e77e23, #d15400);
}

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

Heian Joy color palette created on .