Mariposa カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Mariposa palette

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

Mariposa カラー パレット PNG 画像

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

Mariposa カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #ff8b42;
}
.color-3 {
color: #ffb13d;
}
.color-4 {
color: #f6d55a;
}
.color-5 {
color: #3cafa3;
}

/* CSS Variables */
:root {
--color-1: #ff6e61;
 --color-2: #ff8b42;
 --color-3: #ffb13d;
 --color-4: #f6d55a;
 --color-5: #3cafa3;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #ff8b42, #ffb13d, #f6d55a, #3cafa3);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #ff8b42, #ffb13d, #f6d55a, #3cafa3);
}

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

Mariposa color palette created on .