Tailwind CSS cyan color

The 11 shades of Tailwind CSS cyan, from cyan-50 (lightest) to cyan-950 (darkest). Click any value to copy it.

cyan shades

HEX and RGB from Tailwind v3; OKLCH from Tailwind v4. Click a value to copy it.

cyan-50

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

cyan-950

Copy the whole palette

Tailwind v4 (CSS, @theme)

@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);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: {
          50: '#ecfeff',
          100: '#cffafe',
          200: '#a5f3fc',
          300: '#67e8f9',
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
          700: '#0e7490',
          800: '#155e75',
          900: '#164e63',
          950: '#083344'
        }
      }
    }
  }
}

CSS variables (HEX)

:root {
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;
  --cyan-950: #083344;
}

More Tailwind colors

slate gray zinc neutral stone red orange amber yellow lime green emerald teal sky blue indigo violet purple fuchsia pink rose

Frequently asked questions

What is the HEX code for Tailwind cyan-500?

In Tailwind v3, cyan-500 is #06B6D4, which is rgb(6, 182, 212). In Tailwind v4 it is defined as oklch(71.5% 0.143 215.221).

How do I use Tailwind cyan in my project?

With classes like bg-cyan-500, text-cyan-700 or border-cyan-200. In Tailwind v4 you can also use the CSS variable var(--color-cyan-500) in your own CSS.

Other frameworks

Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.