Midnight Bloom カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Midnight Bloom palette

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

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

Download midnight bloom color palette PNG image (landscape)
Download midnight bloom color palette PNG image (square)

Midnight Bloom カラーパレット CSS

/* CSS */
.color-1 {
color: #2b2b2b;
}
.color-2 {
color: #ff6e61;
}
.color-3 {
color: #6fbe8d;
}
.color-4 {
color: #ffcb5c;
}
.color-5 {
color: #000000;
}

/* CSS Variables */
:root {
--color-1: #2b2b2b;
 --color-2: #ff6e61;
 --color-3: #6fbe8d;
 --color-4: #ffcb5c;
 --color-5: #000000;
 }

Midnight Bloom の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #2b2b2b, #ff6e61, #6fbe8d, #ffcb5c, #000000);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #2b2b2b, #ff6e61, #6fbe8d, #ffcb5c, #000000);
}

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

Midnight Bloom color palette created on .