Starry Soph カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Starry Soph palette

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

Starry Soph カラー パレット PNG 画像

Download starry soph color palette PNG image (landscape)
Download starry soph color palette PNG image (square)

Starry Soph カラーパレット CSS

/* CSS */
.color-1 {
color: #1f1b79;
}
.color-2 {
color: #4b4c9b;
}
.color-3 {
color: #7d7fc5;
}
.color-4 {
color: #b8a1e2;
}
.color-5 {
color: #f3d6ff;
}

/* CSS Variables */
:root {
--color-1: #1f1b79;
 --color-2: #4b4c9b;
 --color-3: #7d7fc5;
 --color-4: #b8a1e2;
 --color-5: #f3d6ff;
 }

Starry Soph の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f1b79, #4b4c9b, #7d7fc5, #b8a1e2, #f3d6ff);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f1b79, #4b4c9b, #7d7fc5, #b8a1e2, #f3d6ff);
}

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

Starry Soph color palette created on .