Pinot Noir
#605258
Muted gray-burgundy depth for cooler contrast layouts
About Pinot Noir
On my monitor, Pinot Noir looks like a gray that decided to take a slower, moodier route. It's medium-dark and more subdued than Fedora, but it doesn't go as heavy or mauve-leaning as Chimaera. Compared with Matterhorn, it reads a touch richer and more wine-tinged, so the undertone feels faintly warm rather than strictly cool.
I use it as a primary panel tone when I need surfaces that hold content in place without pulling attention. It works well for product settings, medical and lab portals, and the kind of editorial UI where you want headers, sidebars, and tool states to feel cohesive across long pages. It's also a solid backdrop for dense table views and status dashboards when you're mixing grayscale imagery with red or amber signals, because the undertone won't fight them.
One caution: Pinot Noir likes cleaner typography. Mid-value gray text can sink fast, so I lean toward higher contrast labels and crisp border weights. Pairing it with cool whites keeps the warmth in check, while softening the saturation too much makes it feel flat.
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.