Tailwind cyan color palette
cyan-50 to cyan-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. cyan-500 is #00B8DB in v4 and #06B6D4 in v3.
Every cyan shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| cyan-50 | bg-cyan-50 | oklch(98.4% 0.019 200.873) | #ECFEFF | #ECFEFF | Azure #F0FFFF |
| cyan-100 | bg-cyan-100 | oklch(95.6% 0.045 203.388) | #CEFAFE | #CFFAFE | Pale Blue #D0FEFE |
| cyan-200 | bg-cyan-200 | oklch(91.7% 0.08 205.041) | #A2F4FD | #A5F3FC | Robin's Egg Blue #98EFF9 |
| cyan-300 | bg-cyan-300 | oklch(86.5% 0.127 207.078) | #53EAFD | #67E8F9 | Robin's Egg #6DEDFD |
| cyan-400 | bg-cyan-400 | oklch(78.9% 0.154 211.53) | #00D3F2 | #22D3EE | Aqua Blue #02D8E9 |
| cyan-500 | bg-cyan-500 | oklch(71.5% 0.143 215.221) | #00B8DB | #06B6D4 | Turquoise Blue #06B1C4 |
| cyan-600 | bg-cyan-600 | oklch(60.9% 0.126 221.723) | #0092B8 | #0891B2 | Blue NCS #118AB2 |
| cyan-700 | bg-cyan-700 | oklch(52% 0.105 223.128) | #007595 | #0E7490 | Sea Blue #047495 |
| cyan-800 | bg-cyan-800 | oklch(45% 0.085 224.283) | #005F78 | #155E75 | Petrol #005F6A |
| cyan-900 | bg-cyan-900 | oklch(39.8% 0.07 227.392) | #104E64 | #164E63 | Dark Grey Blue #29465B |
| cyan-950 | bg-cyan-950 | oklch(30.2% 0.056 229.695) | #053345 | #083344 | Midnight Green #073B4C |
cyan contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, cyan shades 700, 800, 900, 950 pass; on black, cyan shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| cyan-50 | #ECFEFF | 1.04:1 Fail | 20.18:1 AA |
| cyan-100 | #CEFAFE | 1.12:1 Fail | 18.72:1 AA |
| cyan-200 | #A2F4FD | 1.24:1 Fail | 16.89:1 AA |
| cyan-300 | #53EAFD | 1.44:1 Fail | 14.55:1 AA |
| cyan-400 | #00D3F2 | 1.81:1 Fail | 11.59:1 AA |
| cyan-500 | #00B8DB | 2.36:1 Fail | 8.87:1 AA |
| cyan-600 | #0092B8 | 3.61:1 AA large | 5.80:1 AA |
| cyan-700 | #007595 | 5.27:1 AA | 3.97:1 AA large |
| cyan-800 | #005F78 | 7.22:1 AA | 2.90:1 Fail |
| cyan-900 | #104E64 | 9.14:1 AA | 2.29:1 Fail |
| cyan-950 | #053345 | 13.41:1 AA | 1.56:1 Fail |
Use cyan in your project
Utility class: bg-cyan-500. CSS variable: var(--color-cyan-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-cyan-50: oklch(98.4% 0.019 200.873);
--color-cyan-100: oklch(95.6% 0.045 203.388);
--color-cyan-200: oklch(91.7% 0.08 205.041);
--color-cyan-300: oklch(86.5% 0.127 207.078);
--color-cyan-400: oklch(78.9% 0.154 211.53);
--color-cyan-500: oklch(71.5% 0.143 215.221);
--color-cyan-600: oklch(60.9% 0.126 221.723);
--color-cyan-700: oklch(52% 0.105 223.128);
--color-cyan-800: oklch(45% 0.085 224.283);
--color-cyan-900: oklch(39.8% 0.07 227.392);
--color-cyan-950: oklch(30.2% 0.056 229.695);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #00B8DB and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.