Ryleigh カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ryleigh palette

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

Ryleigh カラー パレット PNG 画像

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

Ryleigh カラーパレット CSS

/* CSS */
.color-1 {
color: #4f3c5d;
}
.color-2 {
color: #6e4d7a;
}
.color-3 {
color: #a35c83;
}
.color-4 {
color: #d2a45b;
}
.color-5 {
color: #f5e76b;
}

/* CSS Variables */
:root {
--color-1: #4f3c5d;
 --color-2: #6e4d7a;
 --color-3: #a35c83;
 --color-4: #d2a45b;
 --color-5: #f5e76b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4f3c5d, #6e4d7a, #a35c83, #d2a45b, #f5e76b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4f3c5d, #6e4d7a, #a35c83, #d2a45b, #f5e76b);
}

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

Ryleigh color palette created on .