Mystical Purple カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Mystical Purple palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

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

Mystical Purple カラーパレット CSS

/* CSS */
.color-1 {
color: #1c203b;
}
.color-2 {
color: #3a2b54;
}
.color-3 {
color: #5b4b8b;
}
.color-4 {
color: #7b6aaf;
}
.color-5 {
color: #a79dc8;
}

/* CSS Variables */
:root {
--color-1: #1c203b;
 --color-2: #3a2b54;
 --color-3: #5b4b8b;
 --color-4: #7b6aaf;
 --color-5: #a79dc8;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1c203b, #3a2b54, #5b4b8b, #7b6aaf, #a79dc8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1c203b, #3a2b54, #5b4b8b, #7b6aaf, #a79dc8);
}

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

Mystical Purple color palette created on .