Generate a beautiful tint-to-shade palette from a single hue
Monochromatic Palette Generator
#194DE6
hsl(225, 80%, 50%)
:root {
--primary-50: #e8edfc;
--primary-100: #bac9f7;
--primary-200: #8ca6f2;
--primary-400: #5e82ed;
--primary-500: #305ee8;
--primary-600: #1745cf;
--primary-800: #1236a1;
--primary-900: #0d2673;
--primary-950: #081745;
}Each shade shows how white and dark text appear — useful for accessibility decisions.
A monochromatic colour palette uses a single hue across a range of lightness values to create cohesive, harmonious designs. This free monochromatic palette generator lets you pick any colour or dial in a hue and saturation, then instantly produces 5–11 calibrated tints and shades. Export your palette as CSS custom properties, a Tailwind config snippet, or plain HEX, HSL, and RGB lists — ready to drop into any project.
A monochromatic palette is built from a single hue by varying only its lightness (and sometimes saturation). This produces a set of tints (lighter) and shades (darker) that work together harmoniously, making it ideal for UI colour systems, brand palettes, and backgrounds.
Select the 'Tailwind' export format, set your token name in the Variable / Token Name field, then click 'Copy All'. Paste the output into your tailwind.config.js colors object and your new palette is immediately available as utility classes.
For most UI projects, 9 or 11 shades (following the Tailwind scale from 50 to 950) give you enough range for backgrounds, borders, text, and interactive states. Five shades work well for smaller design systems or simple brand palettes.
Yes. Paste any hex colour (e.g. #3b82f6) into the hex field or use the colour picker, and the tool extracts its hue and saturation automatically, then builds the full monochromatic scale around it.