Violet Nebula カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Violet Nebula palette

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

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

Download violet nebula color palette PNG image (landscape)
Download violet nebula color palette PNG image (square)

Violet Nebula カラーパレット CSS

/* CSS */
.color-1 {
color: #3a0a4d;
}
.color-2 {
color: #711d9a;
}
.color-3 {
color: #a42db4;
}
.color-4 {
color: #ff5c8a;
}
.color-5 {
color: #4ac0f2;
}

/* CSS Variables */
:root {
--color-1: #3a0a4d;
 --color-2: #711d9a;
 --color-3: #a42db4;
 --color-4: #ff5c8a;
 --color-5: #4ac0f2;
 }

Violet Nebula の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3a0a4d, #711d9a, #a42db4, #ff5c8a, #4ac0f2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3a0a4d, #711d9a, #a42db4, #ff5c8a, #4ac0f2);
}

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

Violet Nebula color palette created on .