Lola カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Lola palette

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

Lola カラー パレット PNG 画像

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

Lola カラーパレット CSS

/* CSS */
.color-1 {
color: #f8d4ce;
}
.color-2 {
color: #f2a6b1;
}
.color-3 {
color: #d38dbc;
}
.color-4 {
color: #b46ea5;
}
.color-5 {
color: #7c4a8c;
}

/* CSS Variables */
:root {
--color-1: #f8d4ce;
 --color-2: #f2a6b1;
 --color-3: #d38dbc;
 --color-4: #b46ea5;
 --color-5: #7c4a8c;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f8d4ce, #f2a6b1, #d38dbc, #b46ea5, #7c4a8c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f8d4ce, #f2a6b1, #d38dbc, #b46ea5, #7c4a8c);
}

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

Lola color palette created on .