Ethereal カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ethereal palette

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

Ethereal カラー パレット PNG 画像

Download ethereal color palette PNG image (landscape)
Download ethereal color palette PNG image (square)

Ethereal カラーパレット CSS

/* CSS */
.color-1 {
color: #d2c3df;
}
.color-2 {
color: #a5b5e3;
}
.color-3 {
color: #70b3d2;
}
.color-4 {
color: #3bb09a;
}
.color-5 {
color: #4e818d;
}

/* CSS Variables */
:root {
--color-1: #d2c3df;
 --color-2: #a5b5e3;
 --color-3: #70b3d2;
 --color-4: #3bb09a;
 --color-5: #4e818d;
 }

Ethereal の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d2c3df, #a5b5e3, #70b3d2, #3bb09a, #4e818d);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d2c3df, #a5b5e3, #70b3d2, #3bb09a, #4e818d);
}

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

Ethereal color palette created on .