Blue Yellow Gradient カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Yellow Gradient palette

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

Blue Yellow Gradient カラー パレット PNG 画像

Download blue yellow gradient color palette PNG image (landscape)
Download blue yellow gradient color palette PNG image (square)

Blue Yellow Gradient カラーパレット CSS

/* CSS */
.color-1 {
color: #1f8fff;
}
.color-2 {
color: #f7e17e;
}
.color-3 {
color: #ffb84d;
}
.color-4 {
color: #ff6d1f;
}
.color-5 {
color: #ff3c00;
}

/* CSS Variables */
:root {
--color-1: #1f8fff;
 --color-2: #f7e17e;
 --color-3: #ffb84d;
 --color-4: #ff6d1f;
 --color-5: #ff3c00;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f8fff, #f7e17e, #ffb84d, #ff6d1f, #ff3c00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f8fff, #f7e17e, #ffb84d, #ff6d1f, #ff3c00);
}

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

Blue Yellow Gradient color palette created on .