Blue Technology カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Technology palette

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

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

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

Blue Technology カラーパレット CSS

/* CSS */
.color-1 {
color: #3884ff;
}
.color-2 {
color: #00b4f0;
}
.color-3 {
color: #00f0f0;
}
.color-4 {
color: #4dffaf;
}
.color-5 {
color: #70ffb0;
}

/* CSS Variables */
:root {
--color-1: #3884ff;
 --color-2: #00b4f0;
 --color-3: #00f0f0;
 --color-4: #4dffaf;
 --color-5: #70ffb0;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3884ff, #00b4f0, #00f0f0, #4dffaf, #70ffb0);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3884ff, #00b4f0, #00f0f0, #4dffaf, #70ffb0);
}

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

Blue Technology color palette created on .