Phantasm カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Phantasm palette

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

Phantasm カラー パレット PNG 画像

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

Phantasm カラーパレット CSS

/* CSS */
.color-1 {
color: #7b1fa3;
}
.color-2 {
color: #5e35b1;
}
.color-3 {
color: #4051b5;
}
.color-4 {
color: #2094f3;
}
.color-5 {
color: #02a6f2;
}

/* CSS Variables */
:root {
--color-1: #7b1fa3;
 --color-2: #5e35b1;
 --color-3: #4051b5;
 --color-4: #2094f3;
 --color-5: #02a6f2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #7b1fa3, #5e35b1, #4051b5, #2094f3, #02a6f2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #7b1fa3, #5e35b1, #4051b5, #2094f3, #02a6f2);
}

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

Phantasm color palette created on .