Seafoam Splashes to Pale Turquoise Gradient

CSS

background: linear-gradient(90deg, #b0efce 0%, #afeeee 100%);

From Seafoam Splashes (#B0EFCE) to Pale Turquoise (#AFEEEE). The two hues are 31° 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
Seafoam Splashes	`#B0EFCE`	176, 239, 206	149°, 66%, 81%	26, 0, 14, 6	90.1% 0.078 161
25% (near Seafoam Splashes)	`#B0EFD6`	176, 239, 214	156°, 66%, 81%	26, 0, 10, 6	90.3% 0.072 168
50% (near Water Leaf)	`#B0EFDE`	176, 239, 222	164°, 66%, 81%	26, 0, 7, 6	90.5% 0.068 176
75% (near Pale Turquoise)	`#AFEEE6`	175, 238, 230	172°, 65%, 81%	26, 0, 3, 7	90.5% 0.064 186
Pale Turquoise	`#AFEEEE`	175, 238, 238	180°, 65%, 81%	26, 0, 0, 7	90.7% 0.063 196

Halfway along, the gradient is #B0EFDE, closest to the named color Water Leaf. 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.01:1, so the change is gentle.

Other ways to use it

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

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

Pale Turquoise to Andromeda Blue

Questions

What are the HEX codes of the Seafoam Splashes to Pale Turquoise gradient?

It starts at #B0EFCE (Seafoam Splashes) and ends at #AFEEEE (Pale Turquoise), with #B0EFDE in the middle.

How do I reverse the gradient?

Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #b0efce, #afeeee) runs from Pale Turquoise on the left to Seafoam Splashes on the right.