Moonlis カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Moonlis palette

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

Moonlis カラー パレット PNG 画像

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

Moonlis カラーパレット CSS

/* CSS */
.color-1 {
color: #d8d8f3;
}
.color-2 {
color: #a8a4d5;
}
.color-3 {
color: #7966b7;
}
.color-4 {
color: #b465e2;
}
.color-5 {
color: #6b2d8f;
}

/* CSS Variables */
:root {
--color-1: #d8d8f3;
 --color-2: #a8a4d5;
 --color-3: #7966b7;
 --color-4: #b465e2;
 --color-5: #6b2d8f;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d8d8f3, #a8a4d5, #7966b7, #b465e2, #6b2d8f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d8d8f3, #a8a4d5, #7966b7, #b465e2, #6b2d8f);
}

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

Moonlis color palette created on .