Sunset Bloom カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunset Bloom palette

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

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

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

Sunset Bloom カラーパレット CSS

/* CSS */
.color-1 {
color: #f9c54e;
}
.color-2 {
color: #f9c39f;
}
.color-3 {
color: #f9a4b5;
}
.color-4 {
color: #f29c6e;
}
.color-5 {
color: #f25c5a;
}

/* CSS Variables */
:root {
--color-1: #f9c54e;
 --color-2: #f9c39f;
 --color-3: #f9a4b5;
 --color-4: #f29c6e;
 --color-5: #f25c5a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f9c54e, #f9c39f, #f9a4b5, #f29c6e, #f25c5a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f9c54e, #f9c39f, #f9a4b5, #f29c6e, #f25c5a);
}

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

Sunset Bloom color palette created on .