Electra
#55b492
Pastel mint teal for warmer, lighter blue panels
About Electra
Electra's the brighter cousin in this family, it's sitting higher up the lightness scale than Ambrosial Oceanside or Beau Monde, which means it actually reads as approachable instead of demanding. The saturation is still there, though. It's not washed out like some of the paler teals, but it won't punch you in the face either.
Use it for primary UI elements that need to stay readable in light-background interfaces, buttons, links, and active states in health dashboards, productivity apps, and fintech platforms where the background is mostly white or very pale gray. It's got enough green warmth that it won't drift cold on you, and enough presence that users actually see it without squinting. Pair it with dark charcoal type and it works clean.
The catch: because it's lighter, it's less forgiving on warm-toned backgrounds than its deeper neighbors are. Test it early against your actual off-whites and warm grays. When it lands right, it's the one you reach for when you need teal to feel friendly but not weak.
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.