Sailor Pluto カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sailor Pluto palette

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

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

Download sailor pluto color palette PNG image (landscape)
Download sailor pluto color palette PNG image (square)

Sailor Pluto カラーパレット CSS

/* CSS */
.color-1 {
color: #4c3c5d;
}
.color-2 {
color: #8a5e8d;
}
.color-3 {
color: #b48d9c;
}
.color-4 {
color: #f4c6c3;
}
.color-5 {
color: #f9d89a;
}

/* CSS Variables */
:root {
--color-1: #4c3c5d;
 --color-2: #8a5e8d;
 --color-3: #b48d9c;
 --color-4: #f4c6c3;
 --color-5: #f9d89a;
 }

Sailor Pluto の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4c3c5d, #8a5e8d, #b48d9c, #f4c6c3, #f9d89a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4c3c5d, #8a5e8d, #b48d9c, #f4c6c3, #f9d89a);
}

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

Sailor Pluto color palette created on .