Ethan カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ethan palette

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

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

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

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

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

Ethan カラーパレット CSS

/* CSS */
.color-1 {
color: #5b8b88;
}
.color-2 {
color: #a3bda8;
}
.color-3 {
color: #f4e2c3;
}
.color-4 {
color: #d5713f;
}
.color-5 {
color: #9f3b38;
}

/* CSS Variables */
:root {
--color-1: #5b8b88;
 --color-2: #a3bda8;
 --color-3: #f4e2c3;
 --color-4: #d5713f;
 --color-5: #9f3b38;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5b8b88, #a3bda8, #f4e2c3, #d5713f, #9f3b38);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5b8b88, #a3bda8, #f4e2c3, #d5713f, #9f3b38);
}

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

Ethan color palette created on .