Citrus
A high-visibility yellow with intense green undertones
Citrus is a loud, saturated yellow with distinct green undertones. It demands attention, making it an excellent choice for call-to-action buttons or small visual accents where high visibility is needed. Because it has enough contrast for readability, it works well with black text. Avoid using this as a dominant background color, as its intensity can become overwhelming. The hex code is #9fb70a.
About Citrus
Lemon rind ground into a handful of grass
What does citrus mean?
Citrus yellow often signals energy, freshness, and playful boldness, and it commonly carries hints of spring and ripening fruit. Its high saturation and mid lightness make it feel loud and beaming, a color that pushes forward instead of sitting back.
Where you see citrus
- unripe limes
- highlighter ink
- tennis balls
- fresh sugarcane
- new spring leaves
- legal pads
What it works for
This color suits bold packaging, sporty graphics, summer campaigns, and anywhere one confident accent should grab attention.
What colors go with citrus?
Charcoal #36454fThe deep gray grounds the yellow and keeps its energy from overwhelming the page.Plum #8e4585Dark purple sits opposite on the wheel, so the two intensify each other.Cream #fffdd0A soft neutral gives the color room to glow without competing.Teal #008080Teal shares its green base but runs cooler, creating a lively split.Chocolate Brown #7b3f00The earthy brown mimics soil and rind, a natural pair.
Questions about Citrus
What is the hex code for Citrus?
Citrus is #9fb70a. In RGB that is rgb(159, 183, 10), in HSL hsl(68, 90%, 38%) and in CMYK 13%, 0%, 95%, 28%.
How should I use Citrus #9fb70a in my design interface?
Use Citrus #9fb70a primarily as an accent for call-to-action buttons or small visual highlights. Because its saturation is extremely high, it tends to overwhelm the eye if used as a large background block, but it pops effectively against charcoal or dark gray.
Is Citrus readable on white or black?
Citrus has a 2.26:1 contrast ratio on white and 9.25:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it is too faint for text and on black it works for body text. Try other pairs in the contrast checker.