Ginger Wizardry カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ginger Wizardry palette

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

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

Download ginger wizardry color palette PNG image (landscape)
Download ginger wizardry color palette PNG image (square)

Ginger Wizardry カラーパレット CSS

/* CSS */
.color-1 {
color: #d85f41;
}
.color-2 {
color: #c6a158;
}
.color-3 {
color: #f1d579;
}
.color-4 {
color: #f1a950;
}
.color-5 {
color: #7e3c26;
}

/* CSS Variables */
:root {
--color-1: #d85f41;
 --color-2: #c6a158;
 --color-3: #f1d579;
 --color-4: #f1a950;
 --color-5: #7e3c26;
 }

Ginger Wizardry の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d85f41, #c6a158, #f1d579, #f1a950, #7e3c26);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d85f41, #c6a158, #f1d579, #f1a950, #7e3c26);
}

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

Ginger Wizardry color palette created on .