Yuri カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Yuri palette

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

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

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

Yuri カラーパレット CSS

/* CSS */
.color-1 {
color: #fad12e;
}
.color-2 {
color: #f67e23;
}
.color-3 {
color: #d8553b;
}
.color-4 {
color: #a62b6d;
}
.color-5 {
color: #681b98;
}

/* CSS Variables */
:root {
--color-1: #fad12e;
 --color-2: #f67e23;
 --color-3: #d8553b;
 --color-4: #a62b6d;
 --color-5: #681b98;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #fad12e, #f67e23, #d8553b, #a62b6d, #681b98);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #fad12e, #f67e23, #d8553b, #a62b6d, #681b98);
}

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

Yuri color palette created on .