Tailwind Cyan color shades

Developer tools, technical products, focus rings, and crisp dark-mode accents. This guide lists every cyan shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#ecfeffdark text

100#cffafedark text

200#a5f3fcdark text

300#67e8f9dark text

400#22d3eedark text

500#06b6d4light text

600#0891b2light text

700#0e7490light text

800#155e75light text

900#164e63light text

950#083344light text

Copy-ready Tailwind config

Use a complete class-safe object in your config or token layer. Keeping the full class names and shade keys visible helps build tools and search engines understand the generated code.

export default {
  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",
        },
      },
    },
  },
};

Usage guidance

Use Cyan 50-100 for subtle surfaces, 200-300 for tinted backgrounds, 400-600 for visible accents, and 700-950 for strong text, deep surfaces, or dark-mode emphasis.

For accessibility, test real text sizes and weights before shipping. A shade that passes for large labels may still be weak for compact body copy, disabled states, or small badges.