# Monochromatic Color Generator

Generate a monochromatic palette from one base color with this Monochromatic Color Generator. Enter a 3 or 6 digit hex code and the tool keeps its hue and saturation while shifting lightness by 30 and 15 points in each direction, within 10 to 90 percent, returning five shades and tints as hex codes with your base in the middle. Ideal for designers and developers building calm, consistent UI color scales and themes.

## Frequently asked questions

### What does the Monochromatic Color Generator return?

It returns five colors as six digit lowercase hex codes. Color 3 is your base color, Colors 1 and 2 are darker versions and Colors 4 and 5 are lighter versions of the same hue.

### How are the shades calculated?

The tool converts your hex code to HSL and changes only the lightness: minus 30, minus 15, plus 15 and plus 30 percentage points. Hue and saturation stay the same, so all five colors belong to one color family.

### Is there a lower or upper limit for lightness?

Yes. The darker steps never go below 10 percent lightness and the lighter steps never go above 90 percent, so the scale avoids pure black and pure white.

### Why do I get duplicate or unexpected colors for very dark or very light bases?

Because of the 10 and 90 percent limits, steps near the ends collapse onto the same value. For #000000 the two darker steps both become #1a1a1a, which is lighter than the base, and for #ffffff the two lighter steps are both #e6e6e6.

### What palette does pure red give?

For #ff0000 the tool returns #660000, #b30000, #ff0000, #ff4d4d and #ff9999. Red sits at 50 percent lightness, so it gets the full range of two darker and two lighter steps.

### Which color formats can I enter?

Enter one 3 or 6 digit hex code, with or without the #, such as #3366cc or 36c. RGB and HSL notation and color names are not accepted, so convert them to hex first.

### Why does my base color come back slightly changed?

Hue, saturation and lightness are rounded to whole numbers, so converting to HSL and back can shift one channel by a step. #ff5733, for example, appears as #ff5833 in the middle of the scale.

### Does it work for grays?

Yes. Unlike the hue based schemes, a monochromatic scale changes lightness, so a gray produces lighter and darker grays. Black and white are limited by the 10 to 90 percent range described above.

### How do I use a monochromatic palette in an interface?

Use the darkest colors for text and borders, the base for primary actions and the lightest for backgrounds and hover states. Check text contrast with a WCAG contrast checker, because neighboring steps are only 15 points apart in lightness.

### Is the result the same as the Color Palette Generator?

Yes. This tool runs exactly the Monochromatic option of the Color Palette Generator, so both tools return the same five hex codes for the same base color.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)