Halsin カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Halsin palette

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

Halsin カラー パレット PNG 画像

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

Halsin カラーパレット CSS

/* CSS */
.color-1 {
color: #3b593b;
}
.color-2 {
color: #8f9f6f;
}
.color-3 {
color: #d1c589;
}
.color-4 {
color: #da9b4e;
}
.color-5 {
color: #a54b3b;
}

/* CSS Variables */
:root {
--color-1: #3b593b;
 --color-2: #8f9f6f;
 --color-3: #d1c589;
 --color-4: #da9b4e;
 --color-5: #a54b3b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3b593b, #8f9f6f, #d1c589, #da9b4e, #a54b3b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3b593b, #8f9f6f, #d1c589, #da9b4e, #a54b3b);
}

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

Halsin color palette created on .