Zuko's Fire カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Zuko's Fire palette

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

Zuko's Fire カラー パレット PNG 画像

Download zuko's fire color palette PNG image (landscape)
Download zuko's fire color palette PNG image (square)

Zuko's Fire カラーパレット CSS

/* CSS */
.color-1 {
color: #f86c30;
}
.color-2 {
color: #ffb84d;
}
.color-3 {
color: #f6d12c;
}
.color-4 {
color: #a8d30d;
}
.color-5 {
color: #0d7b8c;
}

/* CSS Variables */
:root {
--color-1: #f86c30;
 --color-2: #ffb84d;
 --color-3: #f6d12c;
 --color-4: #a8d30d;
 --color-5: #0d7b8c;
 }

Zuko's Fire の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f86c30, #ffb84d, #f6d12c, #a8d30d, #0d7b8c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f86c30, #ffb84d, #f6d12c, #a8d30d, #0d7b8c);
}

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

Zuko's Fire color palette created on .