Secret Princess カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Secret Princess palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

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

Secret Princess カラーパレット CSS

/* CSS */
.color-1 {
color: #f7a1b1;
}
.color-2 {
color: #f4a4bf;
}
.color-3 {
color: #f1a7d5;
}
.color-4 {
color: #e6b0e8;
}
.color-5 {
color: #d6c1e2;
}

/* CSS Variables */
:root {
--color-1: #f7a1b1;
 --color-2: #f4a4bf;
 --color-3: #f1a7d5;
 --color-4: #e6b0e8;
 --color-5: #d6c1e2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7a1b1, #f4a4bf, #f1a7d5, #e6b0e8, #d6c1e2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7a1b1, #f4a4bf, #f1a7d5, #e6b0e8, #d6c1e2);
}

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

Secret Princess color palette created on .