Opal
#aee0e4
Opal fog tint for calmer, less icy blue UI
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.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
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
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.