Color

Free Online Tailwind CSS Color Generator — QuizOxa Tools

Enter a single seed hex color code to scale a complete set of 10 Tailwind CSS-compatible shades from 50 (lightest) to 950 (darkest). Copy the resulting configuration JSON directly into your tailwind.config.js file.

Seed Color (HEX)

Generated Tailwind Shades Scale

50#ECFDFC

100#D1FAF8

200#A2F6F0

300#74F1E9

400#45EDE1

500#17E8DA

600#12BAAE

700#0E8B83

800#095D57

900#074641

950#052E2C

Tailwind Config Code snippet

brand: {
  50: '#ecfdfc',
  100: '#d1faf8',
  200: '#a2f6f0',
  300: '#74f1e9',
  400: '#45ede1',
  500: '#17e8da',
  600: '#12baae',
  700: '#0e8b83',
  800: '#095d57',
  900: '#074641',
  950: '#052e2c',
}

Common questions

How are the Tailwind shades generated?

We adjust lightness and saturation dynamically in HSL space, scaling towards white for the 50 shade and towards black/darker values for the 950 shade.

Can I copy the configuration?

Yes. We generate a ready-to-copy JSON object structure.