Hazle カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hazle palette

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

Hazle カラー パレット PNG 画像

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

Hazle カラーパレット CSS

/* CSS */
.color-1 {
color: #d7aa5b;
}
.color-2 {
color: #c5b06d;
}
.color-3 {
color: #a6c69f;
}
.color-4 {
color: #6e8e6b;
}
.color-5 {
color: #4b5d4e;
}

/* CSS Variables */
:root {
--color-1: #d7aa5b;
 --color-2: #c5b06d;
 --color-3: #a6c69f;
 --color-4: #6e8e6b;
 --color-5: #4b5d4e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d7aa5b, #c5b06d, #a6c69f, #6e8e6b, #4b5d4e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d7aa5b, #c5b06d, #a6c69f, #6e8e6b, #4b5d4e);
}

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

下にスクロールして9個のヘーゼルカラーパレットを探索しましょう

Hazle color palette created on .