Royalty カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Royalty palette

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

Royalty カラー パレット PNG 画像

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

Royalty カラーパレット CSS

/* CSS */
.color-1 {
color: #5e3a9c;
}
.color-2 {
color: #8c5da8;
}
.color-3 {
color: #a77dcf;
}
.color-4 {
color: #d5b0e8;
}
.color-5 {
color: #f1e0ff;
}

/* CSS Variables */
:root {
--color-1: #5e3a9c;
 --color-2: #8c5da8;
 --color-3: #a77dcf;
 --color-4: #d5b0e8;
 --color-5: #f1e0ff;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5e3a9c, #8c5da8, #a77dcf, #d5b0e8, #f1e0ff);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5e3a9c, #8c5da8, #a77dcf, #d5b0e8, #f1e0ff);
}

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

Royalty color palette created on .