Astral カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Astral palette

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

Astral カラー パレット PNG 画像

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

Astral カラーパレット CSS

/* CSS */
.color-1 {
color: #6a5bcd;
}
.color-2 {
color: #7a92e1;
}
.color-3 {
color: #a1c1e8;
}
.color-4 {
color: #f0e78e;
}
.color-5 {
color: #f39c12;
}

/* CSS Variables */
:root {
--color-1: #6a5bcd;
 --color-2: #7a92e1;
 --color-3: #a1c1e8;
 --color-4: #f0e78e;
 --color-5: #f39c12;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #6a5bcd, #7a92e1, #a1c1e8, #f0e78e, #f39c12);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #6a5bcd, #7a92e1, #a1c1e8, #f0e78e, #f39c12);
}

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

Astral color palette created on .