Starlit Serenity カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Starlit Serenity palette

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

Starlit Serenity カラーパレット (PNG) をダウンロード

Download starlit serenity color palette PNG image (landscape)
Download starlit serenity color palette PNG image (square)

Starlit Serenity カラーパレット CSS

/* CSS */
.color-1 {
color: #1d1e2a;
}
.color-2 {
color: #4b4e6c;
}
.color-3 {
color: #6f7a9b;
}
.color-4 {
color: #a2c7e7;
}
.color-5 {
color: #f0f5fa;
}

/* CSS Variables */
:root {
--color-1: #1d1e2a;
 --color-2: #4b4e6c;
 --color-3: #6f7a9b;
 --color-4: #a2c7e7;
 --color-5: #f0f5fa;
 }

Starlit Serenity の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1d1e2a, #4b4e6c, #6f7a9b, #a2c7e7, #f0f5fa);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1d1e2a, #4b4e6c, #6f7a9b, #a2c7e7, #f0f5fa);
}

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

Starlit Serenity color palette created on .