Twilight Sparkle カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Twilight Sparkle palette

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

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

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

Twilight Sparkle カラーパレット CSS

/* CSS */
.color-1 {
color: #6b80db;
}
.color-2 {
color: #9d70db;
}
.color-3 {
color: #d68cd9;
}
.color-4 {
color: #f1a7db;
}
.color-5 {
color: #f1dfd5;
}

/* CSS Variables */
:root {
--color-1: #6b80db;
 --color-2: #9d70db;
 --color-3: #d68cd9;
 --color-4: #f1a7db;
 --color-5: #f1dfd5;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #6b80db, #9d70db, #d68cd9, #f1a7db, #f1dfd5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #6b80db, #9d70db, #d68cd9, #f1a7db, #f1dfd5);
}

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

Twilight Sparkle color palette created on .