Vampyre カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Vampyre palette

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

Vampyre カラー パレット PNG 画像

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

Vampyre カラーパレット CSS

/* CSS */
.color-1 {
color: #7a1f3d;
}
.color-2 {
color: #9b2c4d;
}
.color-3 {
color: #c64e6c;
}
.color-4 {
color: #f48a98;
}
.color-5 {
color: #f1b1c0;
}

/* CSS Variables */
:root {
--color-1: #7a1f3d;
 --color-2: #9b2c4d;
 --color-3: #c64e6c;
 --color-4: #f48a98;
 --color-5: #f1b1c0;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #7a1f3d, #9b2c4d, #c64e6c, #f48a98, #f1b1c0);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #7a1f3d, #9b2c4d, #c64e6c, #f48a98, #f1b1c0);
}

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

Vampyre color palette created on .