Opal

#aee0e4

Save

About Opal

On my screen, Opal reads like that misty breath of light you get when you look at sea glass right after a splash. It's airy and very pale, but it holds a blue core instead of turning into flat off-white. Compared to Blizzard Blue, it's a touch more present and less "whisper-calm," with slightly higher saturation. Compared to H0, it's less watery and a bit more structured, not as soft and forgiving.

I use Opal for dashboards and finance apps that need secondary space to feel clean, not empty. It works especially well behind tables, filter panels, and form steps in SaaS onboarding for fintech and health platforms. It also plays nicely as a card background in marketing flows where you want a cool tone that doesn't ghost beside text. It's the one you reach for when your UI feels too stark with whiter blues, but you don't want the teal-leaning confidence of brighter alternatives.

Pair it with darker slate or charcoal so the blue stays intentional. If you put it next to mid blues, it can look delicate, so give it solid hierarchy.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Create a gradient with Opal

Open the generator with this color pre-loaded.

Start creating