Dreamy Pastels カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Dreamy Pastels palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

Dreamy Pastels カラーパレット (PNG) をダウンロード

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

Dreamy Pastels カラーパレット CSS

/* CSS */
.color-1 {
color: #f5b2c5;
}
.color-2 {
color: #a1d3e8;
}
.color-3 {
color: #c4a3e0;
}
.color-4 {
color: #f2cfe1;
}
.color-5 {
color: #e5b8d2;
}

/* CSS Variables */
:root {
--color-1: #f5b2c5;
 --color-2: #a1d3e8;
 --color-3: #c4a3e0;
 --color-4: #f2cfe1;
 --color-5: #e5b8d2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5b2c5, #a1d3e8, #c4a3e0, #f2cfe1, #e5b8d2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5b2c5, #a1d3e8, #c4a3e0, #f2cfe1, #e5b8d2);
}

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

Dreamy Pastels color palette created on .