Poppy the Bubble カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Poppy the Bubble palette

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

Poppy the Bubble カラー パレット PNG 画像

Download poppy the bubble color palette PNG image (landscape)
Download poppy the bubble color palette PNG image (square)

Poppy the Bubble カラーパレット CSS

/* CSS */
.color-1 {
color: #ffccff;
}
.color-2 {
color: #ffe5ff;
}
.color-3 {
color: #fff0ff;
}
.color-4 {
color: #fff5ff;
}
.color-5 {
color: #b3ffff;
}

/* CSS Variables */
:root {
--color-1: #ffccff;
 --color-2: #ffe5ff;
 --color-3: #fff0ff;
 --color-4: #fff5ff;
 --color-5: #b3ffff;
 }

Poppy the Bubble の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffccff, #ffe5ff, #fff0ff, #fff5ff, #b3ffff);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffccff, #ffe5ff, #fff0ff, #fff5ff, #b3ffff);
}

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

Poppy the Bubble color palette created on .