Purple Flower カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Purple Flower palette

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

Purple Flower カラー パレット PNG 画像

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

Purple Flower カラーパレット CSS

/* CSS */
.color-1 {
color: #b397c4;
}
.color-2 {
color: #d9a6d8;
}
.color-3 {
color: #f0c1df;
}
.color-4 {
color: #f9bf9f;
}
.color-5 {
color: #f5e9b2;
}

/* CSS Variables */
:root {
--color-1: #b397c4;
 --color-2: #d9a6d8;
 --color-3: #f0c1df;
 --color-4: #f9bf9f;
 --color-5: #f5e9b2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b397c4, #d9a6d8, #f0c1df, #f9bf9f, #f5e9b2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b397c4, #d9a6d8, #f0c1df, #f9bf9f, #f5e9b2);
}

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

Purple Flower color palette created on .