Citrus

#9fb70a

Warm yellow-green midtone for grounded UI accents

Save
Share

About Citrus

Citrus is what happens when you push yellow-green past the point of politeness without going full neon. It's got the warmth and lift of , but sharper, less muted, more intentional. Compared to 's measured energy or 's competent restraint, this one's brighter and more direct. It doesn't whisper.

You'll land it on agriculture dashboards, fitness apps, and fintech interfaces where you need green to feel optimistic and moving. It reads as progress without the clinical edge that cooler greens carry. The saturation is high enough that it doesn't fade into background grays, but the yellow undertone keeps it from feeling aggressive the way pure lime can. It's the color that works when you need someone to notice the accent and actually feel encouraged by it.

Pair it with off-whites, warm stone, or pale wood and it settles naturally. Against deep neutrals it holds without strain. The catch: next to very warm oranges or saturated reds it can flatten slightly, so make sure there's enough value contrast to keep it reading as its own thing.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.27:1Fail

On Gray 100 #f5f5f5

Aa
2.08:1Fail

On Gray 900 #18181b

Aa
7.81:1AAA

On Black #000000

Aa
9.25:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Citrus

Open the generator with this color pre-loaded.

Start creating