Garnold カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Garnold palette

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

Garnold カラー パレット PNG 画像

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

Garnold カラーパレット CSS

/* CSS */
.color-1 {
color: #c77d3d;
}
.color-2 {
color: #e4b858;
}
.color-3 {
color: #f3d6a5;
}
.color-4 {
color: #f8c8a0;
}
.color-5 {
color: #d46e49;
}

/* CSS Variables */
:root {
--color-1: #c77d3d;
 --color-2: #e4b858;
 --color-3: #f3d6a5;
 --color-4: #f8c8a0;
 --color-5: #d46e49;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #c77d3d, #e4b858, #f3d6a5, #f8c8a0, #d46e49);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #c77d3d, #e4b858, #f3d6a5, #f8c8a0, #d46e49);
}

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

Garnold color palette created on .