Mercury カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Mercury palette

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

Mercury カラー パレット PNG 画像

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

Mercury カラーパレット CSS

/* CSS */
.color-1 {
color: #d5d5d8;
}
.color-2 {
color: #b0b0b5;
}
.color-3 {
color: #7d7d82;
}
.color-4 {
color: #4c4c57;
}
.color-5 {
color: #2b2b31;
}

/* CSS Variables */
:root {
--color-1: #d5d5d8;
 --color-2: #b0b0b5;
 --color-3: #7d7d82;
 --color-4: #4c4c57;
 --color-5: #2b2b31;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d5d5d8, #b0b0b5, #7d7d82, #4c4c57, #2b2b31);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d5d5d8, #b0b0b5, #7d7d82, #4c4c57, #2b2b31);
}

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

Mercury color palette created on .