Cornflower Blue to Medium Slate Blue Gradient

CSS

background: linear-gradient(90deg, #6495ed 0%, #7b68ee 100%);

From Cornflower Blue (#6495ED) to Medium Slate Blue (#7B68EE). The two hues are 30° apart on the color wheel, close enough that the blend stays clean without a muddy middle.

Colors along the gradient

Name	HEX	RGB	HSL	CMYK	OKLCH
Cornflower Blue	`#6495ED`	100, 149, 237	219°, 79%, 66%	58, 37, 0, 7	67.5% 0.141 261
25% (near Cornflower Blue)	`#6A8AED`	106, 138, 237	225°, 78%, 67%	55, 42, 0, 7	65.5% 0.152 268
50% (near Pan Purple)	`#707FEE`	112, 127, 238	233°, 79%, 69%	53, 47, 0, 7	63.8% 0.165 275
75% (near Medium Slate Blue)	`#7573EE`	117, 115, 238	241°, 78%, 69%	51, 52, 0, 7	61.9% 0.180 280
Medium Slate Blue	`#7B68EE`	123, 104, 238	249°, 80%, 67%	48, 56, 0, 7	60.4% 0.194 285

Halfway along, the gradient is #707FEE, closest to the named color Pan Purple. The stops are mixed in RGB, the way browsers draw a linear gradient by default.

Text on this gradient

Black text reads best on both ends, so one text color works across the whole gradient. The two end colors have a contrast ratio of 1.40:1, so the change is gentle.

Other ways to use it

Top to bottom: linear-gradient(180deg, #6495ed, #7b68ee)
Diagonal: linear-gradient(135deg, #6495ed, #7b68ee)
Radial, from the center out: radial-gradient(circle, #6495ed, #7b68ee)
Tailwind CSS: bg-gradient-to-r from-[#6495ed] to-[#7b68ee]

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

Questions

What are the HEX codes of the Cornflower Blue to Medium Slate Blue gradient?

It starts at #6495ED (Cornflower Blue) and ends at #7B68EE (Medium Slate Blue), with #707FEE in the middle.

How do I reverse the gradient?

Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #6495ed, #7b68ee) runs from Medium Slate Blue on the left to Cornflower Blue on the right.