Astra カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Astra palette

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

Astra カラー パレット PNG 画像

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

Astra カラーパレット CSS

/* CSS */
.color-1 {
color: #395e89;
}
.color-2 {
color: #5c8da3;
}
.color-3 {
color: #8cc3c5;
}
.color-4 {
color: #b3e0d8;
}
.color-5 {
color: #f1f7f8;
}

/* CSS Variables */
:root {
--color-1: #395e89;
 --color-2: #5c8da3;
 --color-3: #8cc3c5;
 --color-4: #b3e0d8;
 --color-5: #f1f7f8;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #395e89, #5c8da3, #8cc3c5, #b3e0d8, #f1f7f8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #395e89, #5c8da3, #8cc3c5, #b3e0d8, #f1f7f8);
}

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

Astra color palette created on .