Starlight カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Starlight palette

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

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

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

Starlight カラーパレット CSS

/* CSS */
.color-1 {
color: #1d6f9a;
}
.color-2 {
color: #4eb1c1;
}
.color-3 {
color: #8bdfe4;
}
.color-4 {
color: #f4db8a;
}
.color-5 {
color: #f2a1a1;
}

/* CSS Variables */
:root {
--color-1: #1d6f9a;
 --color-2: #4eb1c1;
 --color-3: #8bdfe4;
 --color-4: #f4db8a;
 --color-5: #f2a1a1;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1d6f9a, #4eb1c1, #8bdfe4, #f4db8a, #f2a1a1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1d6f9a, #4eb1c1, #8bdfe4, #f4db8a, #f2a1a1);
}

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

Starlight color palette created on .