Tailwind Neutral

Eleven steps from neutral-50 to neutral-950. neutral-500 is #737373. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. neutral-50 #fafafa · rgb(250, 250, 250) Black 20.1:1 AAA · White 1.0:1 Fail
  2. neutral-100 #f5f5f5 · rgb(245, 245, 245) Black 19.3:1 AAA · White 1.1:1 Fail CSS whitesmoke
  3. neutral-200 #e5e5e5 · rgb(229, 229, 229) Black 16.7:1 AAA · White 1.3:1 Fail
  4. neutral-300 #d4d4d4 · rgb(212, 212, 212) Black 14.2:1 AAA · White 1.5:1 Fail
  5. neutral-400 #a3a3a3 · rgb(163, 163, 163) Black 8.3:1 AAA · White 2.5:1 Fail
  6. neutral-500 #737373 · rgb(115, 115, 115) Black 4.4:1 Fail · White 4.7:1 AA
  7. neutral-600 #525252 · rgb(82, 82, 82) Black 2.7:1 Fail · White 7.8:1 AAA
  8. neutral-700 #404040 · rgb(64, 64, 64) Black 2.0:1 Fail · White 10.4:1 AAA
  9. neutral-800 #262626 · rgb(38, 38, 38) Black 1.4:1 Fail · White 15.1:1 AAA
  10. neutral-900 #171717 · rgb(23, 23, 23) Black 1.2:1 Fail · White 17.9:1 AAA
  11. neutral-950 #0a0a0a · rgb(10, 10, 10) Black 1.1:1 Fail · White 19.8:1 AAA

Copy into CSS

The official neutral steps as Tailwind theme variables.

@theme {
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
}