Yasmin カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Yasmin palette

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

Yasmin カラー パレット PNG 画像

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

Yasmin カラーパレット CSS

/* CSS */
.color-1 {
color: #f6b83c;
}
.color-2 {
color: #f6d59d;
}
.color-3 {
color: #e1a798;
}
.color-4 {
color: #c6809c;
}
.color-5 {
color: #a95b8c;
}

/* CSS Variables */
:root {
--color-1: #f6b83c;
 --color-2: #f6d59d;
 --color-3: #e1a798;
 --color-4: #c6809c;
 --color-5: #a95b8c;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6b83c, #f6d59d, #e1a798, #c6809c, #a95b8c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6b83c, #f6d59d, #e1a798, #c6809c, #a95b8c);
}

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

Yasmin color palette created on .