Shades & Tints

Tints are your base color mixed with white and shades are the base mixed with black. The generator builds both at once, placing your color in the middle of the ramp with tints above it and shades below it.

Set the slider to 11 steps and treat your base as the 500 slot. For #6366F1 that yields #ACA0F8 around the 300 position, #5151BC at 600, and #3F3D89 at 700, with pure white and black at the extremes that you'll usually discard.

HSL lightness is mathematically even but perceptually lumpy; a 10 percent HSL step looks bigger in yellows than in blues. LAB spacing keeps each step looking like the same size jump, which is what you want when adjacent swatches will sit next to each other in a UI.

That's one of its best uses. Take the swatch one step darker than your base for hover and two steps darker for active. Because the steps are perceptually even, every button in your system will darken by the same visual amount.

Yes, the endpoints are always #FFFFFF and #000000 so the full range is visible. In practice you drop the first and last swatch and keep the interior steps, which is why odd counts like 11 or 13 work so well.

The slider runs from 5 to 21 in increments of two, so counts are always odd and your base color always sits exactly in the center of the ramp. Twenty-one steps is useful when you want fine-grained control for data visualization ramps.

It produces one line of uppercase hex codes separated by commas and spaces, in ramp order from lightest to darkest. Paste it into a spreadsheet, a config file, or a Slack message and the order is preserved.

It's a variations-first color generator. You hand it one base hex and it builds the lighter and darker steps around that, so its job is to create hex color variations from a color you already trust, not to guess random hues.

Yes. Feed one code and the hex color generator returns every step as an uppercase hex, which makes it a handy hexadecimal color generator when you need the 50 through 900 slots filled from a single seed.

It does. Each step copies as an uppercase code, so the hex color code generator output pastes straight into a tokens file or a config. The list runs lightest to darkest so your scale stays readable.

Only the hex half. The ramp outputs codes, so as an rgb color generator or a hex and rgb color generator it stops at hex. Send any swatch to the Hex to RGB tool for the channel numbers.

You can generate color combinations along a single hue, which is what backgrounds, borders, and hover states need. It won't build a multi-hue scheme, so for mixing two distinct brand colors the Color Blender is the better companion.