Nightshade カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Nightshade palette

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

Nightshade カラー パレット PNG 画像

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

Nightshade カラーパレット CSS

/* CSS */
.color-1 {
color: #5f3a6e;
}
.color-2 {
color: #8e699b;
}
.color-3 {
color: #c59b9b;
}
.color-4 {
color: #f1c84b;
}
.color-5 {
color: #e16b6b;
}

/* CSS Variables */
:root {
--color-1: #5f3a6e;
 --color-2: #8e699b;
 --color-3: #c59b9b;
 --color-4: #f1c84b;
 --color-5: #e16b6b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5f3a6e, #8e699b, #c59b9b, #f1c84b, #e16b6b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5f3a6e, #8e699b, #c59b9b, #f1c84b, #e16b6b);
}

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

Nightshade color palette created on .