Purple Villain カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Purple Villain palette

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

Purple Villain カラー パレット PNG 画像

Download purple villain color palette PNG image (landscape)
Download purple villain color palette PNG image (square)

Purple Villain カラーパレット CSS

/* CSS */
.color-1 {
color: #690dab;
}
.color-2 {
color: #a85f2e;
}
.color-3 {
color: #d4b8a1;
}
.color-4 {
color: #f3ca4f;
}
.color-5 {
color: #f5f7fa;
}

/* CSS Variables */
:root {
--color-1: #690dab;
 --color-2: #a85f2e;
 --color-3: #d4b8a1;
 --color-4: #f3ca4f;
 --color-5: #f5f7fa;
 }

Purple Villain の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #690dab, #a85f2e, #d4b8a1, #f3ca4f, #f5f7fa);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #690dab, #a85f2e, #d4b8a1, #f3ca4f, #f5f7fa);
}

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

Purple Villain color palette created on .