Monochromatic Palette Generator

Summary

Pick a base color and generate a full monochromatic palette of tints and shades with one 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