Wood Bark
#302621
Earthy mid-dark gray-brown for grounded panels
About Wood Bark
Wood Bark reads like the inside of a weathered tree trunk: dark, earthy, and unmistakably brown-leaning, but not loud about it. Compared to Noir and Holy Crow, it carries more mid-brown warmth at the surface, so it feels less cooler-and-steady and more like a muted stain. It's also a bit more grainy in tone than Diesel, which stays tighter and more workshop-wall neutral.
I use it when I need dark UI depth that doesn't look like it's wearing gray paint. It's great behind data-dense admin tables in retail ops, logistics portals, and newsroom tooling where you want long sessions to feel grounded, not sterile. It also works well for media review shells, especially when you want thumbnails and waveform sections to pop without the background turning cola-brown.
Pair it with creamy off-whites or soft greige grays. Keep saturated oranges and reds in check, or they'll steer the whole interface toward a warmer brown panel.
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.