Canadian Tuxedo

#579aca

Denim-blue midtone for structured, balanced UI blocks

Save
Share

About Canadian Tuxedo

Canadian Tuxedo sits in that tight middle band where it's noticeably cooler than but still carries enough saturation to land. It's not receding like , not commanding like . This is the blue that feels balanced the moment you place it, present without urgency.

Reach for this in SaaS dashboards, fintech platforms, and health interfaces where you need an accent that reads calm and competent at the same time. Secondary buttons, chart strokes, card accents, active states on lighter backgrounds. It's the kind of color that works harder than it looks because it doesn't need to shout to be seen. Pair it with white and it sits quietly confident. Pair it with darker grays and it stays crisp without that slightly clinical edge you get from cooler blues.

The thing: it won't anchor a layout the way the warmer blues do, and it skews slightly more reserved than on standard monitors. But that restraint is exactly why it's useful. Test it early in your actual product context, especially if you're building something that needs to feel both accessible and trustworthy.

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
3.05:1FailAA Large

On Gray 100 #f5f5f5

Aa
2.80:1Fail

On Gray 900 #18181b

Aa
5.80:1AAAAA Large

On Black #000000

Aa
6.88:1AAAAA Large

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

#57a1ce
#619ad6
#6d98c4
#309cd0
#59a4c1

Create a gradient with Canadian Tuxedo

Open the generator with this color pre-loaded.

Start creating