Sgt. Pepper's Vibrance Color Palette

Brightness

Saturation

Warmth

UI Examples

Explore beautiful UI components with Sgt. Pepper's Vibrance palette

Share this palette to:

Download Sgt. Pepper's Vibrance Color Palette (PNG)

Download sgt. pepper's vibrance color palette PNG image (landscape)
Download sgt. pepper's vibrance color palette PNG image (square)

Sgt. Pepper's Vibrance color palette CSS

/* CSS */
.color-1 {
color: #ff5100;
}
.color-2 {
color: #ff9d00;
}
.color-3 {
color: #ffea00;
}
.color-4 {
color: #00bfff;
}
.color-5 {
color: #ff007b;
}

/* CSS Variables */
:root {
--color-1: #ff5100;
--color-2: #ff9d00;
--color-3: #ffea00;
--color-4: #00bfff;
--color-5: #ff007b;
}

Sgt. Pepper's Vibrance background gradient CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff5100, #ff9d00, #ffea00, #00bfff, #ff007b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff5100, #ff9d00, #ffea00, #00bfff, #ff007b);
}

Sgt. Pepper's Vibrance color palette created on .