Prince カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Prince palette

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

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

Download prince color palette PNG image (landscape)
Download prince color palette PNG image (square)

Prince カラーパレット CSS

/* CSS */
.color-1 {
color: #690dab;
}
.color-2 {
color: #8a2ce2;
}
.color-3 {
color: #4a0080;
}
.color-4 {
color: #9470db;
}
.color-5 {
color: #d8c0d8;
}

/* CSS Variables */
:root {
--color-1: #690dab;
 --color-2: #8a2ce2;
 --color-3: #4a0080;
 --color-4: #9470db;
 --color-5: #d8c0d8;
 }

Prince の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #690dab, #8a2ce2, #4a0080, #9470db, #d8c0d8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #690dab, #8a2ce2, #4a0080, #9470db, #d8c0d8);
}

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

Prince color palette created on .