Harzel カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Harzel palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

Harzel カラーパレット (PNG) をダウンロード

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

Harzel カラーパレット CSS

/* CSS */
.color-1 {
color: #6a4e4d;
}
.color-2 {
color: #b7a99a;
}
.color-3 {
color: #e2d0c5;
}
.color-4 {
color: #f3e5b4;
}
.color-5 {
color: #d4a16e;
}

/* CSS Variables */
:root {
--color-1: #6a4e4d;
 --color-2: #b7a99a;
 --color-3: #e2d0c5;
 --color-4: #f3e5b4;
 --color-5: #d4a16e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #6a4e4d, #b7a99a, #e2d0c5, #f3e5b4, #d4a16e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #6a4e4d, #b7a99a, #e2d0c5, #f3e5b4, #d4a16e);
}

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

Harzel color palette created on .