Marie カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Marie palette

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

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

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

Marie カラーパレット CSS

/* CSS */
.color-1 {
color: #f5a524;
}
.color-2 {
color: #f8e0a0;
}
.color-3 {
color: #f3cec4;
}
.color-4 {
color: #eab8d1;
}
.color-5 {
color: #d65c8d;
}

/* CSS Variables */
:root {
--color-1: #f5a524;
 --color-2: #f8e0a0;
 --color-3: #f3cec4;
 --color-4: #eab8d1;
 --color-5: #d65c8d;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5a524, #f8e0a0, #f3cec4, #eab8d1, #d65c8d);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5a524, #f8e0a0, #f3cec4, #eab8d1, #d65c8d);
}

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

Marie color palette created on .