Shades of Orange and Purple Color Palette

Brightness

Saturation

Warmth

UI Examples

Explore beautiful UI components with Shades of Orange and Purple palette

Share this palette to:

Download Shades of Orange and Purple Color Palette (PNG)

Download shades of orange and purple color palette PNG image (landscape)
Download shades of orange and purple color palette PNG image (square)

Shades of Orange and Purple color palette CSS

/* CSS */
.color-1 {
color: #f0a800;
}
.color-2 {
color: #e15d05;
}
.color-3 {
color: #d94f30;
}
.color-4 {
color: #c94a8e;
}
.color-5 {
color: #7c3d99;
}

/* CSS Variables */
:root {
--color-1: #f0a800;
--color-2: #e15d05;
--color-3: #d94f30;
--color-4: #c94a8e;
--color-5: #7c3d99;
}

Shades of Orange and Purple background gradient CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f0a800, #e15d05, #d94f30, #c94a8e, #7c3d99);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f0a800, #e15d05, #d94f30, #c94a8e, #7c3d99);
}

Shades of Orange and Purple color palette created on .