Monochromatic Palette Generator

A monochromatic color palette consists of multiple shades of a single hue, varying only in lightness and saturation. Unlike gradients that blend between different colours, a monochromatic scale keeps the same hue identity throughout - from the lightest tint to the darkest shade. Our monochromatic palette generator creates these scales by varying the lightness (L) value in HSL colour space while keeping the hue (H) and saturation (S) constant, resulting in a perfectly harmonious colour scale.

1. Enter a base colour: Type any HEX colour or use the native colour picker to choose a base colour. The generator extracts the HSL values (hue, saturation, lightness) from your chosen colour to use as the foundation for the monochromatic scale. All processing runs locally in your browser.
2. Adjust shade count: Use the slider to choose between 5 and 10 shades. The generator intelligently distributes the lightness values across the visible range (from near-black to near-white), centering the base colour approximately in the middle of the scale. This ensures a balanced palette with both light and dark variants.
3. Export your palette: Copy individual swatch values with one click, or use the export panel to copy the entire palette as CSS custom properties (--mono-50 through --mono-950), a Tailwind CSS configuration snippet, or a flat list of HEX values.

• Monochromatic (this tool): Varies lightness in HSL space while keeping hue and saturation constant. The resulting scale preserves the colour character at every step - light shades look like the original colour, just lighter. This is the standard approach used in design systems like Tailwind CSS, Material Design, and Adobe Spectrum.
• Tint & Shade: Mixes the base colour with pure white (tints) or pure black (shades). This approach can produce muddy results at extreme values because adding black desaturates the colour, and adding white washes it out. Tint & shade is better for quick effects but less precise for design systems.
• Why it matters:HSL-based monochromatic scales give you predictable, mathematically consistent colours. When you need a “dark blue that still looks blue,” HSL lightness variation is the correct technique versus mixing with black.

Start with a saturated base colour: Monochromatic palettes work best when the base colour has at least 40-60% saturation. Desaturated colours (like grays) will produce a scale that looks primarily gray at every step. For neutral scales, consider using a near-gray base with very low saturation.

Choose the right number of shades: 5 shades work well for simple UI state variations (default, hover, active, disabled, background). 7-8 shades are ideal for comprehensive design systems that need surface, text, and accent variants. 10 shades match the standard Tailwind CSS scale (50 through 950) and are best for full design token libraries.

Use CSS variables for flexibility: Export your palette as CSS custom properties using the export panel. This allows you to reference your monochromatic scale consistently across your entire application and update it by changing a single variable definition.