Pink Sugar カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Pink Sugar palette

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

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

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

Pink Sugar カラーパレット CSS

/* CSS */
.color-1 {
color: #ffb3ba;
}
.color-2 {
color: #ff667d;
}
.color-3 {
color: #d4a1c8;
}
.color-4 {
color: #f8a5b3;
}
.color-5 {
color: #d8c7e1;
}

/* CSS Variables */
:root {
--color-1: #ffb3ba;
 --color-2: #ff667d;
 --color-3: #d4a1c8;
 --color-4: #f8a5b3;
 --color-5: #d8c7e1;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffb3ba, #ff667d, #d4a1c8, #f8a5b3, #d8c7e1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffb3ba, #ff667d, #d4a1c8, #f8a5b3, #d8c7e1);
}

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

Pink Sugar color palette created on .