Pink Unicorn カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Pink Unicorn palette

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

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

Download pink unicorn color palette PNG image (landscape)
Download pink unicorn color palette PNG image (square)

Pink Unicorn カラーパレット CSS

/* CSS */
.color-1 {
color: #f3a5d5;
}
.color-2 {
color: #ffb3e0;
}
.color-3 {
color: #e8c4f3;
}
.color-4 {
color: #a8e2f0;
}
.color-5 {
color: #ffea8f;
}

/* CSS Variables */
:root {
--color-1: #f3a5d5;
 --color-2: #ffb3e0;
 --color-3: #e8c4f3;
 --color-4: #a8e2f0;
 --color-5: #ffea8f;
 }

Pink Unicorn の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f3a5d5, #ffb3e0, #e8c4f3, #a8e2f0, #ffea8f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f3a5d5, #ffb3e0, #e8c4f3, #a8e2f0, #ffea8f);
}

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

Pink Unicorn color palette created on .