Tailwind Cyan

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

  1. cyan-50 #ecfeff · rgb(236, 254, 255) Black 20.2:1 AAA · White 1.0:1 Fail
  2. cyan-100 #cffafe · rgb(207, 250, 254) Black 18.8:1 AAA · White 1.1:1 Fail
  3. cyan-200 #a5f3fc · rgb(165, 243, 252) Black 16.8:1 AAA · White 1.2:1 Fail
  4. cyan-300 #67e8f9 · rgb(103, 232, 249) Black 14.5:1 AAA · White 1.4:1 Fail
  5. cyan-400 #22d3ee · rgb(34, 211, 238) Black 11.6:1 AAA · White 1.8:1 Fail
  6. cyan-500 #06b6d4 · rgb(6, 182, 212) Black 8.6:1 AAA · White 2.4:1 Fail
  7. cyan-600 #0891b2 · rgb(8, 145, 178) Black 5.7:1 AA · White 3.7:1 Fail
  8. cyan-700 #0e7490 · rgb(14, 116, 144) Black 3.9:1 Fail · White 5.4:1 AA
  9. cyan-800 #155e75 · rgb(21, 94, 117) Black 2.9:1 Fail · White 7.3:1 AAA
  10. cyan-900 #164e63 · rgb(22, 78, 99) Black 2.3:1 Fail · White 9.1:1 AAA
  11. cyan-950 #083344 · rgb(8, 51, 68) Black 1.6:1 Fail · White 13.4:1 AAA

Copy into CSS

The official cyan steps as Tailwind theme variables.

@theme {
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
}