Hobgoblin
#01ad8f
Saturated green-leaning teal for bold, grounded accents
About Hobgoblin
This shade looks like a shortcut through muddy teal at the last minute. Hobgoblin reads as teal-green, but it's not as "fresh snap" bright as Billiard, and it's not the friendlier, mid-temperature warmth of Herbal. It sits a little heavier and darker than Hole in One, with lower glare and a more grounded presence.
I use Hobgoblin when I need an accent that feels active without turning minty or clinically icy. It's great for SaaS dashboards and productivity tools where status pills, primary CTA fills, and selected navigation states need to stay legible over soft charts. Compared to Herbal, it's more saturated and more grounded, so it doesn't rely on warmth to carry it. Compared to Billiard, it's less neon and more weighty, so it won't feel pushy on light panels.
One quirk: on very cool grays, Hobgoblin can lean a touch more green than you expect, so I like to test it next to your real UI background and icon strokes. It's the one you reach for when the button needs authority, not brightness.
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.
