Soft Café カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Soft Café palette

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

Soft Café カラー パレット PNG 画像

Download soft café color palette PNG image (landscape)
Download soft café color palette PNG image (square)

Soft Café カラーパレット CSS

/* CSS */
.color-1 {
color: #f1c0c0;
}
.color-2 {
color: #f6b6b6;
}
.color-3 {
color: #f9d6a4;
}
.color-4 {
color: #f7e0b6;
}
.color-5 {
color: #d3c6e6;
}

/* CSS Variables */
:root {
--color-1: #f1c0c0;
 --color-2: #f6b6b6;
 --color-3: #f9d6a4;
 --color-4: #f7e0b6;
 --color-5: #d3c6e6;
 }

Soft Café の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f1c0c0, #f6b6b6, #f9d6a4, #f7e0b6, #d3c6e6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f1c0c0, #f6b6b6, #f9d6a4, #f7e0b6, #d3c6e6);
}

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

Soft Café color palette created on .