Jupiter カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Jupiter palette

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

Jupiter カラー パレット PNG 画像

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

Jupiter カラーパレット CSS

/* CSS */
.color-1 {
color: #1e3a5c;
}
.color-2 {
color: #4a8cb5;
}
.color-3 {
color: #4ddbb7;
}
.color-4 {
color: #f6e1a2;
}
.color-5 {
color: #f1843b;
}

/* CSS Variables */
:root {
--color-1: #1e3a5c;
 --color-2: #4a8cb5;
 --color-3: #4ddbb7;
 --color-4: #f6e1a2;
 --color-5: #f1843b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1e3a5c, #4a8cb5, #4ddbb7, #f6e1a2, #f1843b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1e3a5c, #4a8cb5, #4ddbb7, #f6e1a2, #f1843b);
}

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

Jupiter color palette created on .