Soft Contrast カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Soft Contrast palette

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

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

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

Soft Contrast カラーパレット CSS

/* CSS */
.color-1 {
color: #1a1a1a;
}
.color-2 {
color: #f6f7f8;
}
.color-3 {
color: #f9d6d2;
}
.color-4 {
color: #f9e1d2;
}
.color-5 {
color: #1b4b4b;
}

/* CSS Variables */
:root {
--color-1: #1a1a1a;
 --color-2: #f6f7f8;
 --color-3: #f9d6d2;
 --color-4: #f9e1d2;
 --color-5: #1b4b4b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1a1a1a, #f6f7f8, #f9d6d2, #f9e1d2, #1b4b4b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1a1a1a, #f6f7f8, #f9d6d2, #f9e1d2, #1b4b4b);
}

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

Soft Contrast color palette created on .