Celebration Spectrum カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Celebration Spectrum palette

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

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

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

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

Download celebration spectrum color palette PNG image (landscape)
Download celebration spectrum color palette PNG image (square)

Celebration Spectrum カラーパレット CSS

/* CSS */
.color-1 {
color: #b24d01;
}
.color-2 {
color: #df9e07;
}
.color-3 {
color: #91be6f;
}
.color-4 {
color: #43a889;
}
.color-5 {
color: #023697;
}

/* CSS Variables */
:root {
--color-1: #b24d01;
 --color-2: #df9e07;
 --color-3: #91be6f;
 --color-4: #43a889;
 --color-5: #023697;
 }

Celebration Spectrum の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b24d01, #df9e07, #91be6f, #43a889, #023697);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b24d01, #df9e07, #91be6f, #43a889, #023697);
}

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

Celebration Spectrum color palette created on .