Sou Hiyori カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sou Hiyori palette

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

Sou Hiyori カラー パレット PNG 画像

Download sou hiyori color palette PNG image (landscape)
Download sou hiyori color palette PNG image (square)

Sou Hiyori カラーパレット CSS

/* CSS */
.color-1 {
color: #f6b83c;
}
.color-2 {
color: #f9d44e;
}
.color-3 {
color: #fcd07e;
}
.color-4 {
color: #f1b1c2;
}
.color-5 {
color: #f7a6b6;
}

/* CSS Variables */
:root {
--color-1: #f6b83c;
 --color-2: #f9d44e;
 --color-3: #fcd07e;
 --color-4: #f1b1c2;
 --color-5: #f7a6b6;
 }

Sou Hiyori の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6b83c, #f9d44e, #fcd07e, #f1b1c2, #f7a6b6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6b83c, #f9d44e, #fcd07e, #f1b1c2, #f7a6b6);
}

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

Sou Hiyori color palette created on .