Pink Canyon カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Pink Canyon palette

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

Pink Canyon カラー パレット PNG 画像

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

Pink Canyon カラーパレット CSS

/* CSS */
.color-1 {
color: #f8b4cc;
}
.color-2 {
color: #f28cad;
}
.color-3 {
color: #f0567a;
}
.color-4 {
color: #d63f2e;
}
.color-5 {
color: #9c2b38;
}

/* CSS Variables */
:root {
--color-1: #f8b4cc;
 --color-2: #f28cad;
 --color-3: #f0567a;
 --color-4: #d63f2e;
 --color-5: #9c2b38;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f8b4cc, #f28cad, #f0567a, #d63f2e, #9c2b38);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f8b4cc, #f28cad, #f0567a, #d63f2e, #9c2b38);
}

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

Pink Canyon color palette created on .