Hoku カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hoku palette

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

Hoku カラー パレット PNG 画像

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

Hoku カラーパレット CSS

/* CSS */
.color-1 {
color: #ffcc00;
}
.color-2 {
color: #ff9900;
}
.color-3 {
color: #ff6600;
}
.color-4 {
color: #ff3300;
}
.color-5 {
color: #cc0033;
}

/* CSS Variables */
:root {
--color-1: #ffcc00;
 --color-2: #ff9900;
 --color-3: #ff6600;
 --color-4: #ff3300;
 --color-5: #cc0033;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffcc00, #ff9900, #ff6600, #ff3300, #cc0033);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffcc00, #ff9900, #ff6600, #ff3300, #cc0033);
}

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

Hoku color palette created on .