Serenity in Blue Hues カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Serenity in Blue Hues palette

Image Gallery

Example Image

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

Serenity in Blue Hues カラーパレット CSS

/* CSS */
.color-1 {
color: #dde9ee;
}
.color-2 {
color: #c8dbe4;
}
.color-3 {
color: #b6cfdd;
}
.color-4 {
color: #a0c1d4;
}
.color-5 {
color: #8db6ce;
}

/* CSS Variables */
:root {
--color-1: #dde9ee;
 --color-2: #c8dbe4;
 --color-3: #b6cfdd;
 --color-4: #a0c1d4;
 --color-5: #8db6ce;
 }

Serenity in Blue Hues の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #dde9ee, #c8dbe4, #b6cfdd, #a0c1d4, #8db6ce);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #dde9ee, #c8dbe4, #b6cfdd, #a0c1d4, #8db6ce);
}

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

Serenity in Blue Hues color palette created on .