Blue Moonlight カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Moonlight palette

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

Blue Moonlight カラー パレット PNG 画像

Download blue moonlight color palette PNG image (landscape)
Download blue moonlight color palette PNG image (square)

Blue Moonlight カラーパレット CSS

/* CSS */
.color-1 {
color: #1e3b71;
}
.color-2 {
color: #2a7e9d;
}
.color-3 {
color: #4fb9e3;
}
.color-4 {
color: #a6d6e8;
}
.color-5 {
color: #f3f9fc;
}

/* CSS Variables */
:root {
--color-1: #1e3b71;
 --color-2: #2a7e9d;
 --color-3: #4fb9e3;
 --color-4: #a6d6e8;
 --color-5: #f3f9fc;
 }

Blue Moonlight の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1e3b71, #2a7e9d, #4fb9e3, #a6d6e8, #f3f9fc);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1e3b71, #2a7e9d, #4fb9e3, #a6d6e8, #f3f9fc);
}

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

Blue Moonlight color palette created on .