Tailwind Sky

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

  1. sky-50 #f0f9ff · rgb(240, 249, 255) Black 19.7:1 AAA · White 1.1:1 Fail
  2. sky-100 #e0f2fe · rgb(224, 242, 254) Black 18.3:1 AAA · White 1.1:1 Fail
  3. sky-200 #bae6fd · rgb(186, 230, 253) Black 15.8:1 AAA · White 1.3:1 Fail
  4. sky-300 #7dd3fc · rgb(125, 211, 252) Black 12.6:1 AAA · White 1.7:1 Fail
  5. sky-400 #38bdf8 · rgb(56, 189, 248) Black 9.8:1 AAA · White 2.1:1 Fail
  6. sky-500 #0ea5e9 · rgb(14, 165, 233) Black 7.6:1 AAA · White 2.8:1 Fail
  7. sky-600 #0284c7 · rgb(2, 132, 199) Black 5.1:1 AA · White 4.1:1 Fail
  8. sky-700 #0369a1 · rgb(3, 105, 161) Black 3.5:1 Fail · White 5.9:1 AA
  9. sky-800 #075985 · rgb(7, 89, 133) Black 2.8:1 Fail · White 7.6:1 AAA
  10. sky-900 #0c4a6e · rgb(12, 74, 110) Black 2.2:1 Fail · White 9.5:1 AAA
  11. sky-950 #082f49 · rgb(8, 47, 73) Black 1.5:1 Fail · White 13.9:1 AAA

Copy into CSS

The official sky steps as Tailwind theme variables.

@theme {
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
}