Lotus Bloom カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Lotus Bloom palette

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

Lotus Bloom カラー パレット PNG 画像

Download lotus bloom color palette PNG image (landscape)
Download lotus bloom color palette PNG image (square)

Lotus Bloom カラーパレット CSS

/* CSS */
.color-1 {
color: #f6e3b6;
}
.color-2 {
color: #f2b1d8;
}
.color-3 {
color: #c5a3e1;
}
.color-4 {
color: #8eb4d7;
}
.color-5 {
color: #6dc0a3;
}

/* CSS Variables */
:root {
--color-1: #f6e3b6;
 --color-2: #f2b1d8;
 --color-3: #c5a3e1;
 --color-4: #8eb4d7;
 --color-5: #6dc0a3;
 }

Lotus Bloom の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6e3b6, #f2b1d8, #c5a3e1, #8eb4d7, #6dc0a3);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6e3b6, #f2b1d8, #c5a3e1, #8eb4d7, #6dc0a3);
}

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

Lotus Bloom color palette created on .