Natural Order
#77b033
Balanced yellow-green midtone for grounded UI charts
About Natural Order
Natural Order reads like a clipped, healthy leaf color that's had the glare dialed back. It sits in the green family without leaning yellow like German Hop or going deeper and more canopy-grounded like Guardian of Gardens. And unlike Gameboy Screen's sharper, cooler punch, this one feels smoother and a touch more subdued, with a balanced green undertone that doesn't spike attention.
I use Natural Order for product and operations UI where you want "green" to mean ready or on-track, not alert. It shows up well in green infrastructure reporting, warehouse and fleet maintenance statuses, and ag-tech monitoring panels that need consistent category labeling across tables, badges, and map overlays. It's the one you reach for when the background is photo-heavy but your status color still needs to stay calm and readable.
Pair it with warm neutrals like cream or light tan so the green keeps its clarity. If you put it next to very yellow greens, it'll look slightly more serious, less sunlit.
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.
