Midnight Pines
#17240b
Deep blue-green for focused dark UI panels
About Midnight Pines
Midnight Pines looks like dark evergreen ink on a matte screen, not like wet shadow. Compared with Haunted Forest's cold, pooling understory and Lindworm Green's cleaner, cut-pigment mid-tone, this one is both deeper and smoother, with a restrained, night-at-the-edge feel. It holds saturation without turning sooty, and it doesn't drift toward olive the way more muted greens sometimes do.
I use Midnight Pines as a primary dark surface when the layout still needs hierarchy, but you want the green to feel sealed and deliberate, not damp or foggy. Great behind map panel headers for utilities and environmental monitoring, and in fleet or conservation dashboards where status chips and legend blocks need to read decisively against crisp UI neutrals. It's the kind of color that supports dense data tables without making the interface feel heavy or near-black.
Pair it with cool grays and clean off-whites. Warm creams can flatten the contrast and make it feel slightly muddier than you want.
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.