Loading...

Elegant Earth カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Elegant Earth palette

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

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

Download elegant earth color palette PNG image (landscape)
Download elegant earth color palette PNG image (square)

Elegant Earth カラーパレット CSS

/* CSS */
.color-1 {
color: #000000;
}
.color-2 {
color: #f2d2c4;
}
.color-3 {
color: #f2e0cf;
}
.color-4 {
color: #f2d2b0;
}
.color-5 {
color: #a78d72;
}

/* CSS Variables */
:root {
--color-1: #000000;
 --color-2: #f2d2c4;
 --color-3: #f2e0cf;
 --color-4: #f2d2b0;
 --color-5: #a78d72;
 }

Elegant Earth の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #000000, #f2d2c4, #f2e0cf, #f2d2b0, #a78d72);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #000000, #f2d2c4, #f2e0cf, #f2d2b0, #a78d72);
}

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

Elegant Earth color palette created on .