Hex Color Scale Generator

Paste any hex code (or click a tile below) to see its full color scale — lighter tints, darker shades, and hue and chroma variations — and copy any step in one click. Prefer precomputed values? Browse the color library, check how tints and shades work, or convert formats with the hex to RGB converter.

What a color scale is for

A single hex code is not enough to build anything. The moment you have a button you need a hover for it, a pressed state, a border that reads as related but quieter, and a background tint for the panel it sits in. A color scale is that set: one hue, resolved into evenly spaced steps so the relationships between them are consistent instead of hand-picked. Most design systems settle on nine to eleven steps — Tailwind's 50–950, Material's 50–900 — for exactly this reason, and a scale generated from your own brand hex drops straight into that shape.

How to read the three axes

Every color has three independent properties, and this tool gives you one mode per axis:

  • Lightness — how close the color is to white or black. Sweeping it produces the tints and shades of your color: the ramp you use for surfaces, text, borders, and interactive states. This is the default mode and the one you will use most.
  • Chroma — how saturated the color is, from full intensity down to gray, at the same lightness. These are the tones of your color: muted versions for disabled controls, subtle fills, and anything that should recede.
  • Hue — the color's position on the color wheel, with saturation and lightness held still. Rotating it finds companion colors of the same visual weight, which is what the color wheel does by named harmony rules like complementary and triadic.

Hold two axes still and change the third and the result always looks deliberate. Change two at once and it usually does not.

A worked example

Paste #0F766E — Tailwind's teal-700 — into the field above. In HSL it is hsl(175, 77%, 26%). In Lightness mode the scale walks that 26% up and down while hue and saturation stay put: a 20% tint gives #3F918B for a hover surface, a 20% shade gives #0C5E58 for a pressed state or a heading. Switch to Chroma and the same lightness holds while saturation drops toward gray. Every step is click-to-copy, and the URL carries the hex, so /colors/#0f766e is a shareable link to this exact scale.

Where to go next

If you would rather start from a color that is already worked out, the color library has 280+ precomputed pages, including every step of the Tailwind CSS palette. To sample a color off your screen first, use the color picker; to get a ready-made ten-step ramp instead of the full spectrum, use the tint and shade generator. And whatever you build, run the text-and-background pairs through the contrast checker — steps that look distinct side by side are not necessarily far enough apart to be legible.