Color Palette Generator
Pick a base color → generate Tailwind-style 50-900 scale plus complement/triad/analogous.
#2563EBHSL(221, 83%, varies)
Tailwind-style scale (click to copy hex)
Complementary (hue +180°)
Triad (hue +120°, +240°)
Analogous (hue ±30°)
50: #F1F5FE
100: #DEE8FC
200: #B9CDF8
300: #8AACF4
400: #5284EF
500: #1659E9
600: #124BC4
700: #0F3EA3
800: #0C307E
900: #09235D
950: #071B46
About Color Palette Generator
Pick a base color and the generator builds a tinted-to-shaded scale from 50 through 900, similar to the steps used in Tailwind CSS. Alongside the scale it derives related hues, including the complement, a triad, and analogous colors, with each swatch showing its hex value to copy.
The palette is computed in your browser, so the colors you experiment with stay on your device. This is a fast way to draft a consistent design system, fill in hover and border shades from a single brand color, or explore harmonious accent options before committing them to a stylesheet.
Frequently asked questions
- What do the numbers 50 to 900 mean?
- They are lightness steps, where 50 is the lightest tint and 900 the darkest shade of the same base hue.
- What are complementary, triad, and analogous colors?
- Complementary colors sit opposite on the color wheel, triads are evenly spaced thirds, and analogous colors are neighbors of the base hue.
- What color format does it output?
- Each swatch shows a hex code that you can copy directly into CSS or a design tool.