Emerald Bliss

#4cbdac

Balanced teal-aqua for calmer, cooler blue panels

Save
Share

About Emerald Bliss

Emerald Bliss sits brighter and warmer than the deeper teals around it, it's got enough green in the mix that it actually feels alive without the clinical precision of or the murky weight of . This is the color that doesn't demand all your attention but refuses to disappear either.

Use it for accent layers, hover states, and soft interactive moments in health apps, fintech interfaces, and design systems where you need something that reads as considered but not aggressive. It plays well in cards, badges, and secondary buttons where would feel too washed out and would feel too confrontational. The warmth keeps it from drifting gray, and the lightness means it won't flatten even on cooler monitor profiles.

Pair it with dark charcoal type and it holds clean. Worth noting: it's sensitive enough to background temperature that a warm gray backdrop will shift how it lands, so test it early against your actual neutrals. It's the one you reach for when you want presence without pressure.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.29:1Fail

On Gray 100 #f5f5f5

Aa
2.10:1Fail

On Gray 900 #18181b

Aa
7.75:1AAA

On Black #000000

Aa
9.18:1AAA

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

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Emerald Bliss

Open the generator with this color pre-loaded.

Start creating