Astronaut カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Astronaut palette

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

Astronaut カラー パレット PNG 画像

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

Astronaut カラーパレット CSS

/* CSS */
.color-1 {
color: #3b4f91;
}
.color-2 {
color: #5e6fa1;
}
.color-3 {
color: #9ea2c7;
}
.color-4 {
color: #f7c94b;
}
.color-5 {
color: #f15d3b;
}

/* CSS Variables */
:root {
--color-1: #3b4f91;
 --color-2: #5e6fa1;
 --color-3: #9ea2c7;
 --color-4: #f7c94b;
 --color-5: #f15d3b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3b4f91, #5e6fa1, #9ea2c7, #f7c94b, #f15d3b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3b4f91, #5e6fa1, #9ea2c7, #f7c94b, #f15d3b);
}

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

Astronaut color palette created on .