Teal glass steps fading toward white and deepening toward black.

ONELESS / COLOR

Tint and Shade Generator

Tint and Shade Generator makes two simple operations visible: adding white and adding black. Starting from an opaque HEX color, compare equal mixing steps in both directions. The labels tell you the added percentage so that the result can be reproduced or explained without guessing what a lighter or darker swatch means.

Open Tint and Shade Generator. JavaScript powers the workspace; the full guide is available below.

UNDERSTAND THE RESULT

Color, with a little context.

A tint adds white

At 0% white you have the original base. At 100% white you have #FFFFFF. Intermediate steps average the encoded sRGB channels using the full mixing ratio. Labels and copied CSS comments use up to two decimal places; ≈ marks a rounded percentage, such as ≈33.33% for one third.

A shade adds black

The second group follows the same ratio toward #000000. The base appears again at 0% to make each sequence independently readable.

These are digital mixtures

The model averages sRGB channel values. It does not simulate paint, subtractive pigments or equal changes in perceived brightness. Use Color Mixer to compare encoded and linear sRGB mixing.

HOW TO USE IT

From a starting point to a usable result.

  1. Enter the opaque Base HEX and choose three, four or five steps per group.
  2. Read White percentages in the tint group and Black percentages in the shade group. Each swatch remains labeled on small screens.
  3. Select a result to inspect its HEX and black/white contrast. Copy one HEX or the complete CSS set with mixture comments.

A WORKED EXAMPLE

Half white and half black around red

For #FF0000, 50% white gives #FF8080 while 50% black gives #800000. The halfway channel value 127.5 rounds to 128 in the exported 8-bit HEX.

EVERYDAY USES

Make the next small decision easier.

Explore a subtle background

Try a high-white mixture as a background and measure the intended text against it.

Explain a derived color

Copy the CSS variables with their White or Black percentage comments when the derivation matters in a design handoff.

LOCAL WORKSPACE

Your work stays in this browser.

The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.

These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.

KEEP IT NEARBY

One less search next time.

Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.

Adding a OneLess browser shortcut

Choose a shortcut icon

QUESTIONS, ANSWERED

A few useful details.

What is the difference between tint and shade?

Here a tint is the base mixed with white, and a shade is the base mixed with black. The percentage is the added white or black amount.

Why is the original color shown twice?

Each group begins at 0% added color. Keeping the base in both groups makes the two independent directions clear.

Are these HSL lightness adjustments?

No. They are direct encoded sRGB mixtures. Color Shades Generator provides a separate HSL-based scale.

Can I add gray for tones?

Not in this view. Use Color Mixer with your chosen gray as the second color for a controlled digital mixture.

How many tint and shade steps can I choose?

Choose three to five steps per group. This lets you compare a compact set of lighter and darker mixtures around the original color.

What does a mixing percentage describe?

It describes the contribution of white for a tint or black for a shade in the tool’s RGB mixture. It is not a percentage of perceived brightness.

Should I use every generated tint and shade in a design?

No. Select the few values that serve clear roles, such as a surface, border and accent. Check text contrast for the actual pair you choose.

REFERENCES

CSS color values — MDN

ANOTHER SMALL STEP

Keep the next tool close.

Color Shades Generator ↗A scale of light and dark, built around your color.Color Mixer ↗Find the point where two colors meet.Color Picker ↗Find a shade, refine it, and take the code with you.

Explore Color Tools ↗

Ready for a little more color?

Follow your color toward white and toward black.

Return to Tint and Shade Generator ↑