Huebook

Candy Grape Fizz to Bubblegum Baby Girl Gradient

CSS

background: linear-gradient(90deg, #7755ee 0%, #cc55ee 100%);

From Candy Grape Fizz (#7755EE) to Bubblegum Baby Girl (#CC55EE). The two hues are 33° apart on the color wheel, close enough that the blend stays clean without a muddy middle.

Colors along the gradient

NameHEXRGBHSLCMYK
Candy Grape Fizz#7755EE119, 85, 238253°, 82%, 63%50, 64, 0, 7
25% (near Candy Grape Fizz)#8C55EE140, 85, 238262°, 82%, 63%41, 64, 0, 7
50% (near Orion Nebula)#A255EE162, 85, 238270°, 82%, 63%32, 64, 0, 7
75% (near Orion Nebula)#B755EE183, 85, 238278°, 82%, 63%23, 64, 0, 7
Bubblegum Baby Girl#CC55EE204, 85, 238287°, 82%, 63%14, 64, 0, 7

Halfway along, the gradient is #A255EE, closest to the named color Orion Nebula. The stops are mixed in RGB, the way browsers draw a linear gradient by default.

Text on this gradient

White text reads best on the Candy Grape Fizz end and black text on the Bubblegum Baby Girl end. For a single line of text across the whole width, put it on a solid panel or pick the side it sits on. The two end colors have a contrast ratio of 1.41:1, so the change is gentle.

Other ways to use it

Gradients like this work well for page headers, buttons, cards and slide backgrounds. Keep body text on a solid color for the best readability.

Related gradients

Questions

What are the HEX codes of the Candy Grape Fizz to Bubblegum Baby Girl gradient?

It starts at #7755EE (Candy Grape Fizz) and ends at #CC55EE (Bubblegum Baby Girl), with #A255EE in the middle.

How do I reverse the gradient?

Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #7755ee, #cc55ee) runs from Bubblegum Baby Girl on the left to Candy Grape Fizz on the right.