Caramel Shades カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Caramel Shades palette

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

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

Download caramel shades color palette PNG image (landscape)
Download caramel shades color palette PNG image (square)

Caramel Shades カラーパレット CSS

/* CSS */
.color-1 {
color: #a86d3e;
}
.color-2 {
color: #d19b6b;
}
.color-3 {
color: #f6d7a2;
}
.color-4 {
color: #e2b04b;
}
.color-5 {
color: #a94c2d;
}

/* CSS Variables */
:root {
--color-1: #a86d3e;
 --color-2: #d19b6b;
 --color-3: #f6d7a2;
 --color-4: #e2b04b;
 --color-5: #a94c2d;
 }

Caramel Shades の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a86d3e, #d19b6b, #f6d7a2, #e2b04b, #a94c2d);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a86d3e, #d19b6b, #f6d7a2, #e2b04b, #a94c2d);
}

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

Caramel Shades color palette created on .