Lost Hero カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Lost Hero palette

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

Lost Hero カラー パレット PNG 画像

Download lost hero color palette PNG image (landscape)
Download lost hero color palette PNG image (square)

Lost Hero カラーパレット CSS

/* CSS */
.color-1 {
color: #d3a178;
}
.color-2 {
color: #c85f3c;
}
.color-3 {
color: #a82e3a;
}
.color-4 {
color: #7d2c4b;
}
.color-5 {
color: #4a1c3c;
}

/* CSS Variables */
:root {
--color-1: #d3a178;
 --color-2: #c85f3c;
 --color-3: #a82e3a;
 --color-4: #7d2c4b;
 --color-5: #4a1c3c;
 }

Lost Hero の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d3a178, #c85f3c, #a82e3a, #7d2c4b, #4a1c3c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d3a178, #c85f3c, #a82e3a, #7d2c4b, #4a1c3c);
}

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

Lost Hero color palette created on .