Princess Cadence カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Princess Cadence palette

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

Princess Cadence カラー パレット PNG 画像

Download princess cadence color palette PNG image (landscape)
Download princess cadence color palette PNG image (square)

Princess Cadence カラーパレット CSS

/* CSS */
.color-1 {
color: #f7a1c3;
}
.color-2 {
color: #f1c0d1;
}
.color-3 {
color: #e2a2e0;
}
.color-4 {
color: #d9b6e2;
}
.color-5 {
color: #cbe5f6;
}

/* CSS Variables */
:root {
--color-1: #f7a1c3;
 --color-2: #f1c0d1;
 --color-3: #e2a2e0;
 --color-4: #d9b6e2;
 --color-5: #cbe5f6;
 }

Princess Cadence の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7a1c3, #f1c0d1, #e2a2e0, #d9b6e2, #cbe5f6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7a1c3, #f1c0d1, #e2a2e0, #d9b6e2, #cbe5f6);
}

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

Princess Cadence color palette created on .