Coffee Shop カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Coffee Shop palette

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

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

Download coffee shop color palette PNG image (landscape)
Download coffee shop color palette PNG image (square)

Coffee Shop カラーパレット CSS

/* CSS */
.color-1 {
color: #7e5c3e;
}
.color-2 {
color: #c1a56c;
}
.color-3 {
color: #e3d3a5;
}
.color-4 {
color: #f1e0c6;
}
.color-5 {
color: #4b3d2a;
}

/* CSS Variables */
:root {
--color-1: #7e5c3e;
 --color-2: #c1a56c;
 --color-3: #e3d3a5;
 --color-4: #f1e0c6;
 --color-5: #4b3d2a;
 }

Coffee Shop の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #7e5c3e, #c1a56c, #e3d3a5, #f1e0c6, #4b3d2a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #7e5c3e, #c1a56c, #e3d3a5, #f1e0c6, #4b3d2a);
}

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

Coffee Shop color palette created on .