About Mallard
Mallard reads like a blue you can actually use for work, not one that just looks good in a swatch. Compared with Nocturnal Expedition's muted depth and Nocturne's dim glassy restraint, Mallard feels a touch lighter and more open, with a cleaner blue presence that doesn't get as subdued or gray-leaning. It also stays warmer than Cold and Dark, which goes almost-black and cold first.
I reach for Mallard when I want a panel header or sidebar that has confidence but still feels readable at a glance. It's great for healthcare layouts with lots of labels, and it holds up nicely in newsroom analytics and back-office dashboards where the UI density is real and you need calm hierarchy without sinking into night-mode gloom. In chart areas, it gives the data a steadier base than the darker near-black blues, so bright accents don't feel swallowed.
Pair it with mid-light grays and crisp type, and avoid dragging it next to very warm surfaces, because it can start looking slightly heavy rather than balanced.
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.
