Spectrum of Possibilities カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Spectrum of Possibilities palette

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

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

Download spectrum of possibilities color palette PNG image (landscape)
Download spectrum of possibilities color palette PNG image (square)

Spectrum of Possibilities カラーパレット CSS

/* CSS */
.color-1 {
color: #f9c54e;
}
.color-2 {
color: #91be6f;
}
.color-3 {
color: #43ad8d;
}
.color-4 {
color: #56768f;
}
.color-5 {
color: #277ca0;
}

/* CSS Variables */
:root {
--color-1: #f9c54e;
 --color-2: #91be6f;
 --color-3: #43ad8d;
 --color-4: #56768f;
 --color-5: #277ca0;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f9c54e, #91be6f, #43ad8d, #56768f, #277ca0);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f9c54e, #91be6f, #43ad8d, #56768f, #277ca0);
}

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

Spectrum of Possibilities color palette created on .