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: #d0e7e7;
}
.color-2 {
color: #292929;
}
.color-3 {
color: #e3a1a1;
}
.color-4 {
color: #ffe6c7;
}
.color-5 {
color: #000000;
}

/* CSS Variables */
:root {
--color-1: #d0e7e7;
 --color-2: #292929;
 --color-3: #e3a1a1;
 --color-4: #ffe6c7;
 --color-5: #000000;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d0e7e7, #292929, #e3a1a1, #ffe6c7, #000000);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d0e7e7, #292929, #e3a1a1, #ffe6c7, #000000);
}

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

Soft Contrast color palette created on .