RecolorOpen Recolor

Eleven shades, from olive-50 to olive-950

Tailwind olive colors

Tailwind CSS 4.3.3 defines eleven olive shades in OKLCH, from olive-50 (#fbfbf9) to olive-950 (#0c0c09). On them white text passes WCAG AA from olive-600 to olive-950, and black text from olive-50 to olive-500. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#fbfbf9
  2. 100#f4f4f0
  3. 200#e8e8e3
  4. 300#d8d8d0
  5. 400#abab9c
  6. 500#7c7c67
  7. 600#5b5b4b
  8. 700#474739
  9. 800#2b2b22
  10. 900#1d1d16
  11. 950#0c0c09
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
olive-50oklch(98.8% 0.003 106.5)#fbfbf91.04:1 fails20.27:1 passes
olive-100oklch(96.6% 0.005 106.5)#f4f4f01.10:1 fails19.05:1 passes
olive-200oklch(93% 0.007 106.5)#e8e8e31.23:1 fails17.08:1 passes
olive-300oklch(88% 0.011 106.6)#d8d8d01.43:1 fails14.65:1 passes
olive-400oklch(73.7% 0.021 106.9)#abab9c2.32:1 fails9.04:1 passes
olive-500oklch(58% 0.031 107.3)#7c7c674.25:1 fails4.94:1 passes
olive-600oklch(46.6% 0.025 107.3)#5b5b4b6.90:1 passes3.04:1 fails
olive-700oklch(39.4% 0.023 107.4)#4747399.42:1 passes2.23:1 fails
olive-800oklch(28.6% 0.016 107.4)#2b2b2214.27:1 passes1.47:1 fails
olive-900oklch(22.8% 0.013 107.4)#1d1d1616.94:1 passes1.24:1 fails
olive-950oklch(15.3% 0.006 107.1)#0c0c0919.59:1 passes1.07:1 fails

Text on olive, and olive as text

For olive text the same lines hold in reverse: on white, use olive-600 or darker; on black, olive-500 or lighter. Contrast does not care which color sits behind.

Tailwind ships nine grays, and olive is the one with a yellow hint: its chroma never passes 0.031.

None of the eleven leaves sRGB, so each hex matches its OKLCH value.

Sources