Monochromatic Palette Generator

Summary

This tool generates a monochromatic color palette from any base hex color by stepping through lightness values in HSL color space. It produces a range of tints (lighter variants) and shades (darker variants) while keeping the hue and saturation locked. Each swatch displays its hex and RGB values, and you can copy any value with a single click.

How it works

1. Enter or pick a base hex color using the color picker or the text input.
2. Choose the number of steps (3 to 20) to control palette granularity.
3. The tool converts your color to HSL and distributes lightness values evenly across the range.
4. Swatches are rendered from darkest shade to lightest tint.
5. Click any swatch to copy its hex value, or use the RGB button to copy the RGB string.
6. Use "Export All" to copy the full palette as a JSON object.

Use cases

• Build a consistent UI color scale for a design system.
• Generate CSS custom property sets for a single-color theme.
• Create print-safe grayscale-equivalent variants of a brand color.
• Quickly explore light and dark mode variations of an accent color.
• Generate accessible contrast-checked color ladders for text on backgrounds.
• Produce cohesive background, border, and text color sets from one brand color.

Frequently Asked Questions