Moonie カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Moonie palette

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

Moonie カラー パレット PNG 画像

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

Moonie カラーパレット CSS

/* CSS */
.color-1 {
color: #f7e9f5;
}
.color-2 {
color: #d0c5e2;
}
.color-3 {
color: #abb9d8;
}
.color-4 {
color: #7b9bd5;
}
.color-5 {
color: #4d86d1;
}

/* CSS Variables */
:root {
--color-1: #f7e9f5;
 --color-2: #d0c5e2;
 --color-3: #abb9d8;
 --color-4: #7b9bd5;
 --color-5: #4d86d1;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7e9f5, #d0c5e2, #abb9d8, #7b9bd5, #4d86d1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7e9f5, #d0c5e2, #abb9d8, #7b9bd5, #4d86d1);
}

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

Moonie color palette created on .