Shadowheart カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Shadowheart palette

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

Shadowheart カラー パレット PNG 画像

Download shadowheart color palette PNG image (landscape)
Download shadowheart color palette PNG image (square)

Shadowheart カラーパレット CSS

/* CSS */
.color-1 {
color: #380a43;
}
.color-2 {
color: #6f2c90;
}
.color-3 {
color: #9f6ccb;
}
.color-4 {
color: #d27fbe;
}
.color-5 {
color: #f05a28;
}

/* CSS Variables */
:root {
--color-1: #380a43;
 --color-2: #6f2c90;
 --color-3: #9f6ccb;
 --color-4: #d27fbe;
 --color-5: #f05a28;
 }

Shadowheart の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #380a43, #6f2c90, #9f6ccb, #d27fbe, #f05a28);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #380a43, #6f2c90, #9f6ccb, #d27fbe, #f05a28);
}

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

Shadowheart color palette created on .