Purple Cosmo カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Purple Cosmo palette

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

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

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

Purple Cosmo カラーパレット CSS

/* CSS */
.color-1 {
color: #4b3c72;
}
.color-2 {
color: #7c6d9c;
}
.color-3 {
color: #a7a2c3;
}
.color-4 {
color: #d6cae2;
}
.color-5 {
color: #f3e2f1;
}

/* CSS Variables */
:root {
--color-1: #4b3c72;
 --color-2: #7c6d9c;
 --color-3: #a7a2c3;
 --color-4: #d6cae2;
 --color-5: #f3e2f1;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4b3c72, #7c6d9c, #a7a2c3, #d6cae2, #f3e2f1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4b3c72, #7c6d9c, #a7a2c3, #d6cae2, #f3e2f1);
}

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

Purple Cosmo color palette created on .