Soft Contrasts カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Soft Contrasts palette

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

Soft Contrasts カラー パレット PNG 画像

Download soft contrasts color palette PNG image (landscape)
Download soft contrasts color palette PNG image (square)

Soft Contrasts カラーパレット CSS

/* CSS */
.color-1 {
color: #808080;
}
.color-2 {
color: #e0e0e0;
}
.color-3 {
color: #b2e1e1;
}
.color-4 {
color: #f2c4c4;
}
.color-5 {
color: #f2d6ca;
}

/* CSS Variables */
:root {
--color-1: #808080;
 --color-2: #e0e0e0;
 --color-3: #b2e1e1;
 --color-4: #f2c4c4;
 --color-5: #f2d6ca;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #808080, #e0e0e0, #b2e1e1, #f2c4c4, #f2d6ca);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #808080, #e0e0e0, #b2e1e1, #f2c4c4, #f2d6ca);
}

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

Soft Contrasts color palette created on .