Shuri カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Shuri palette

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

Shuri カラー パレット PNG 画像

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

Shuri カラーパレット CSS

/* CSS */
.color-1 {
color: #3f2a92;
}
.color-2 {
color: #703c9a;
}
.color-3 {
color: #a54a9e;
}
.color-4 {
color: #da6c5d;
}
.color-5 {
color: #f0a800;
}

/* CSS Variables */
:root {
--color-1: #3f2a92;
 --color-2: #703c9a;
 --color-3: #a54a9e;
 --color-4: #da6c5d;
 --color-5: #f0a800;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3f2a92, #703c9a, #a54a9e, #da6c5d, #f0a800);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3f2a92, #703c9a, #a54a9e, #da6c5d, #f0a800);
}

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

Shuri color palette created on .