Named color · #9FB70A
Citrus
Citrus is #9FB70A: rgb(159 183 10), hsl(68 90% 38%), oklch(0.735 0.171 118.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Citrus color name →
#9FB70A
oklch(0.735 0.171 118.8)
Color conversions
- HEX
- #9fb70a
- RGB
- rgb(159 183 10)
- HSL
- hsl(68 90% 38%)
- HWB
- hwb(68 4% 28%)
- OKLCH
- oklch(0.735 0.171 118.8)
- OKLab
- oklab(0.735 -0.082 0.15)
- CIE Lab
- lab(70.65 -22.35 69.31)
- LCH
- lch(70.65 72.83 107.9)
- CMYK
- cmyk(13% 0% 95% 28%)
Tints · Shades · Tones
Tints
- A8BF3D
- B1C65A
- BACD71
- C4D587
- CDDC9C
- D7E3B0
- E1EAC4
- EBF1D8
- F5F8EB
Shades
- 8A9F07
- 758705
- 617003
- 4D5A02
- 3B4501
- 293101
- 181E00
- 090C00
- 010200
Tones
- 9CB22D
- 98AC3E
- 95A74B
- 92A256
- 8F9C5F
- 8C9767
- 89916E
- 868B74
- 83867A
Color harmonies
Complementary +180°
- 9FB70A
Citrus
- B890FF
≈ Lilac Geode
Analogous -30° +30°
- 9FB70A
Citrus
- D0A300
≈ Immortelle Yellow
- 4AC66A
≈ Zombie Green
Triadic +120° +240°
- 9FB70A
Citrus
- 29B5FF
≈ Blue Bolt
- FC75A7
≈ Pico-8 Pink
Split-complementary +150° +210°
- 9FB70A
Citrus
- 86A4FF
≈ Fennel Flower
- E27EDE
≈ Hibiscus Pop
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.26:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.25:1 · APCA Lc 58
Best text color: #000000
WCAG 9.25:1 (AAA) · APCA Lc 58
Contrast pairs
Code snippets
CSS
:root {
--citrus: #9fb70a;
--citrus-rgb: 159 183 10;
--citrus-oklch: oklch(0.735 0.171 118.8);
}
.element {
color: var(--citrus);
background-color: hsl(68 90% 38%);
border-color: oklch(0.735 0.171 118.8);
}Tailwind CSS v4
@theme {
--color-citrus: #9fb70a;
--color-citrus-50: #eefdc7;
--color-citrus-100: #dff1b1;
--color-citrus-200: #cae08c;
--color-citrus-300: #abc45a;
--color-citrus-400: #95ab0a;
--color-citrus-500: #7c9300;
--color-citrus-600: #697d00;
--color-citrus-700: #546400;
--color-citrus-800: #3f4900;
--color-citrus-900: #2c3200;
--color-citrus-950: #191e00;
}SCSS
$citrus: #9fb70a;
$citrus-rgb: 159, 183, 10;
$citrus-light: mix(#fff, $citrus, 20%);
$citrus-dark: mix(#000, $citrus, 20%);
.element {
color: $citrus;
box-shadow: 0 0 0 2px rgba($citrus, 0.35);
}