Magnesium
#c1c2c3
Neutral mid-light gray for crisp, restrained UI
About Magnesium
Magnesium reads like a clean, industrial wipe-down: a light gray that feels slightly more matter-of-fact than the softer cool options nearby. It's not the refrigerator-door chill of Icebreaker, and it doesn't have the dusty blue-mist calm of Memory Lane. Compared to Ephemeral Blue, it holds closer to neutral, so the overall temperature stays steadier and less "cool-push."
I use Magnesium for secondary UI surfaces when I want less blue-forward presence and a more even, workhorse tone. It's my go-to for dashboards and finance apps where tables, filter panels, and form backgrounds need to separate sections without leaning into a noticeable blue agenda. The saturation is restrained and the lightness is just high enough that it doesn't fight white space, but it still anchors layouts better than the paler grays.
Quirk: paired with very cool teals and blues, it can look a bit flatter. For balance, I like it next to darker slates and neutral text so the hierarchy stays crisp.
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.