Maple Leaf カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Maple Leaf palette

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

Maple Leaf カラー パレット PNG 画像

Download maple leaf color palette PNG image (landscape)
Download maple leaf color palette PNG image (square)

Maple Leaf カラーパレット CSS

/* CSS */
.color-1 {
color: #9f512d;
}
.color-2 {
color: #d25e28;
}
.color-3 {
color: #e6a34c;
}
.color-4 {
color: #f6ca5a;
}
.color-5 {
color: #f9dab4;
}

/* CSS Variables */
:root {
--color-1: #9f512d;
 --color-2: #d25e28;
 --color-3: #e6a34c;
 --color-4: #f6ca5a;
 --color-5: #f9dab4;
 }

Maple Leaf の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #9f512d, #d25e28, #e6a34c, #f6ca5a, #f9dab4);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #9f512d, #d25e28, #e6a34c, #f6ca5a, #f9dab4);
}

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

Maple Leaf color palette created on .