Tailwind Teal

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

  1. teal-50 #f0fdfa · rgb(240, 253, 250) Black 20.1:1 AAA · White 1.0:1 Fail
  2. teal-100 #ccfbf1 · rgb(204, 251, 241) Black 18.6:1 AAA · White 1.1:1 Fail
  3. teal-200 #99f6e4 · rgb(153, 246, 228) Black 16.7:1 AAA · White 1.3:1 Fail
  4. teal-300 #5eead4 · rgb(94, 234, 212) Black 14.2:1 AAA · White 1.5:1 Fail
  5. teal-400 #2dd4bf · rgb(45, 212, 191) Black 11.3:1 AAA · White 1.9:1 Fail
  6. teal-500 #14b8a6 · rgb(20, 184, 166) Black 8.4:1 AAA · White 2.5:1 Fail
  7. teal-600 #0d9488 · rgb(13, 148, 136) Black 5.6:1 AA · White 3.7:1 Fail
  8. teal-700 #0f766e · rgb(15, 118, 110) Black 3.8:1 Fail · White 5.5:1 AA
  9. teal-800 #115e59 · rgb(17, 94, 89) Black 2.8:1 Fail · White 7.6:1 AAA
  10. teal-900 #134e4a · rgb(19, 78, 74) Black 2.2:1 Fail · White 9.5:1 AAA
  11. teal-950 #042f2e · rgb(4, 47, 46) Black 1.5:1 Fail · White 14.5:1 AAA

Copy into CSS

The official teal steps as Tailwind theme variables.

@theme {
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
}