Soft Pastels カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Soft Pastels palette

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

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

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

Soft Pastels カラーパレット CSS

/* CSS */
.color-1 {
color: #ffffff;
}
.color-2 {
color: #e0e1f5;
}
.color-3 {
color: #f3c3c3;
}
.color-4 {
color: #f3c3e3;
}
.color-5 {
color: #c3f3f3;
}

/* CSS Variables */
:root {
--color-1: #ffffff;
 --color-2: #e0e1f5;
 --color-3: #f3c3c3;
 --color-4: #f3c3e3;
 --color-5: #c3f3f3;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffffff, #e0e1f5, #f3c3c3, #f3c3e3, #c3f3f3);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffffff, #e0e1f5, #f3c3c3, #f3c3e3, #c3f3f3);
}

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

Soft Pastels color palette created on .