Riyu カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Riyu palette

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

Riyu カラー パレット PNG 画像

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

Riyu カラーパレット CSS

/* CSS */
.color-1 {
color: #f5b2c1;
}
.color-2 {
color: #f6d67e;
}
.color-3 {
color: #a3e1d2;
}
.color-4 {
color: #5eafe8;
}
.color-5 {
color: #6f5b9a;
}

/* CSS Variables */
:root {
--color-1: #f5b2c1;
 --color-2: #f6d67e;
 --color-3: #a3e1d2;
 --color-4: #5eafe8;
 --color-5: #6f5b9a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5b2c1, #f6d67e, #a3e1d2, #5eafe8, #6f5b9a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5b2c1, #f6d67e, #a3e1d2, #5eafe8, #6f5b9a);
}

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

Riyu color palette created on .