Gryffindor Inspired カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Gryffindor Inspired palette

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

Gryffindor Inspired カラー パレット PNG 画像

Download gryffindor inspired color palette PNG image (landscape)
Download gryffindor inspired color palette PNG image (square)

Gryffindor Inspired カラーパレット CSS

/* CSS */
.color-1 {
color: #a30000;
}
.color-2 {
color: #c03c0c;
}
.color-3 {
color: #f1c40e;
}
.color-4 {
color: #f0a800;
}
.color-5 {
color: #ffcc00;
}

/* CSS Variables */
:root {
--color-1: #a30000;
 --color-2: #c03c0c;
 --color-3: #f1c40e;
 --color-4: #f0a800;
 --color-5: #ffcc00;
 }

Gryffindor Inspired の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a30000, #c03c0c, #f1c40e, #f0a800, #ffcc00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a30000, #c03c0c, #f1c40e, #f0a800, #ffcc00);
}

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

Gryffindor Inspired color palette created on .