Purple Dreams カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Purple Dreams palette

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

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

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

Purple Dreams カラーパレット CSS

/* CSS */
.color-1 {
color: #b69dd2;
}
.color-2 {
color: #a780cb;
}
.color-3 {
color: #8c6cc6;
}
.color-4 {
color: #5b4a96;
}
.color-5 {
color: #3e2a6f;
}

/* CSS Variables */
:root {
--color-1: #b69dd2;
 --color-2: #a780cb;
 --color-3: #8c6cc6;
 --color-4: #5b4a96;
 --color-5: #3e2a6f;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b69dd2, #a780cb, #8c6cc6, #5b4a96, #3e2a6f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b69dd2, #a780cb, #8c6cc6, #5b4a96, #3e2a6f);
}

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

Purple Dreams color palette created on .