Blue-Collar
#005f7a
Workaday teal blue for crisp, stable interfaces
About Blue-Collar
Blue-Collar sits noticeably lighter and more saturated than Blue Velvet or Atlantis, which means it actually reads as a primary color instead of a support player. It's got genuine visual weight without the underwater mutedness that makes those deeper blues feel like they're already fading into the background. This is the blue that looks built to lead, not to whisper.
Use it in product dashboards, healthcare interfaces, and fintech platforms where you need a color that commands attention on light surfaces without feeling cold or clinical. It works as a button state, a header, a data highlight, anything that needs to feel actionable and present. Pairs cleanly with white type and doesn't require the handholding that cooler blues demand when sitting next to mid-tone neutrals.
The catch: it's less forgiving on dark backgrounds than Copacabana or Blue Velvet. It can feel thin or washed out depending on what surrounds it, so test it early against your actual layout. But on standard light UIs, it does the work of a primary blue without the arrogance.
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.