Blue Atlas カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Atlas palette

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

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

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

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

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

Blue Atlas カラーパレット CSS

/* CSS */
.color-1 {
color: #4b91e2;
}
.color-2 {
color: #50e2c3;
}
.color-3 {
color: #f8e61b;
}
.color-4 {
color: #f5a524;
}
.color-5 {
color: #cf021a;
}

/* CSS Variables */
:root {
--color-1: #4b91e2;
 --color-2: #50e2c3;
 --color-3: #f8e61b;
 --color-4: #f5a524;
 --color-5: #cf021a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4b91e2, #50e2c3, #f8e61b, #f5a524, #cf021a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4b91e2, #50e2c3, #f8e61b, #f5a524, #cf021a);
}

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

Blue Atlas color palette created on .