Queen Poppy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Queen Poppy palette

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

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

Download queen poppy color palette PNG image (landscape)
Download queen poppy color palette PNG image (square)

Queen Poppy カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #f7b2a1;
}
.color-3 {
color: #f2d2ca;
}
.color-4 {
color: #eab59f;
}
.color-5 {
color: #c74b38;
}

/* CSS Variables */
:root {
--color-1: #ff6e61;
 --color-2: #f7b2a1;
 --color-3: #f2d2ca;
 --color-4: #eab59f;
 --color-5: #c74b38;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #f7b2a1, #f2d2ca, #eab59f, #c74b38);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #f7b2a1, #f2d2ca, #eab59f, #c74b38);
}

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

Queen Poppy color palette created on .