Jade Jewel
#247e81
Cool, saturated jade teal for sharper calm panels
About Jade Jewel
I keep seeing Jade Jewel on account pages where the UI needs to feel crisp but not heavy. This one lands in a tighter, cooler teal lane than Bermuda, yet it carries more saturation and clarity than Diver's Eden. It doesn't hover or fade, and it doesn't sink into Emperor Jade's near-black depth. The undertone is distinctly blue, with just enough green to stay fresh, not murky.
On real product screens, it's great for primary buttons and selected tabs in dashboards and finance apps that need to look decisive without turning aggressive. I'd also use it for status accents and metric highlights in healthcare portals and operations tooling, especially when the layout is text-forward and you want the color to read cleanly against white and light grays. Compared to Bermuda's heavier weight, Jade Jewel feels more measured and controlled, like it's confident at a medium volume.
Pair it with soft neutrals and slightly warm grays; cooler palettes can make it feel a touch more severe than you expect.
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.
