Purple Twilight カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Purple Twilight palette

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

Purple Twilight カラーパレット (PNG) をダウンロード

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

Purple Twilight カラーパレット CSS

/* CSS */
.color-1 {
color: #4b258d;
}
.color-2 {
color: #7540bf;
}
.color-3 {
color: #8e5abf;
}
.color-4 {
color: #ba7ec9;
}
.color-5 {
color: #d39ccb;
}

/* CSS Variables */
:root {
--color-1: #4b258d;
 --color-2: #7540bf;
 --color-3: #8e5abf;
 --color-4: #ba7ec9;
 --color-5: #d39ccb;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4b258d, #7540bf, #8e5abf, #ba7ec9, #d39ccb);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4b258d, #7540bf, #8e5abf, #ba7ec9, #d39ccb);
}

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

Purple Twilight color palette created on .