Blue Zodiac カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Zodiac palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

Download blue zodiac color palette PNG image (landscape)
Download blue zodiac color palette PNG image (square)

Blue Zodiac カラーパレット CSS

/* CSS */
.color-1 {
color: #13274e;
}
.color-2 {
color: #1c4b78;
}
.color-3 {
color: #3b7a9b;
}
.color-4 {
color: #6dc0bf;
}
.color-5 {
color: #a5e3e1;
}

/* CSS Variables */
:root {
--color-1: #13274e;
 --color-2: #1c4b78;
 --color-3: #3b7a9b;
 --color-4: #6dc0bf;
 --color-5: #a5e3e1;
 }

Blue Zodiac の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #13274e, #1c4b78, #3b7a9b, #6dc0bf, #a5e3e1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #13274e, #1c4b78, #3b7a9b, #6dc0bf, #a5e3e1);
}

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

Blue Zodiac color palette created on .