Sunburst カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunburst palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

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

Sunburst カラーパレット CSS

/* CSS */
.color-1 {
color: #faa700;
}
.color-2 {
color: #ffc929;
}
.color-3 {
color: #ffdc5c;
}
.color-4 {
color: #ffed85;
}
.color-5 {
color: #ff5e29;
}

/* CSS Variables */
:root {
--color-1: #faa700;
 --color-2: #ffc929;
 --color-3: #ffdc5c;
 --color-4: #ffed85;
 --color-5: #ff5e29;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #faa700, #ffc929, #ffdc5c, #ffed85, #ff5e29);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #faa700, #ffc929, #ffdc5c, #ffed85, #ff5e29);
}

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

Sunburst color palette created on .