HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Color shades generator: tints, shades and tones

Choose a color and a step count to get three rows: tints mixed toward white, shades toward black and tones toward gray. Click any swatch to copy its code.

Tints: mixed toward white

Shades: mixed toward black

Tones: mixed toward gray

Tints, shades and tones

These three words have exact meanings in color theory, and the generator gives you a row of each:

  • A tint is a color mixed with white. It gets lighter and paler: pastels are tints.
  • A shade is a color mixed with black. It gets darker and keeps its hue: navy is a shade of blue.
  • A tone is a color mixed with gray. It gets duller and more muted: dusty rose is a tone of pink.

In everyday speech "shades of blue" just means "different blues", but in a paint shop or a design system the distinction matters.

Example: pigment teal #0F766E in five steps

StepTintShadeTone
0%#0F766E#0F766E#0F766E
20%#3F918B#0C5E58#267872
40%#6FADA8#094742#3C7A75
60%#9FC8C5#062F2C#537C79
80%#CFE4E2#031816#697E7C

Each row starts at your color and moves in equal steps toward white, black or mid gray (#808080). The last step stops short of pure white, black or gray, so every swatch still carries some of your hue.

Three ways to mix

The Mix in setting changes how "halfway between" is calculated.

  • sRGB averages the RGB numbers directly. That's what most online shade generators and CSS color-mix(in srgb, …) do, so pick it to match other tools.
  • Linear light mixes the actual light intensities, the way two overlapping spotlights or very fine paint pigments would. Tints get light quickly: the 20% teal tint is #7D9F9A, already much paler than the sRGB version.
  • OKLab mixes in a perceptual space, so each step looks like an equal change. That's usually the best choice for interface ramps.

None of them is wrong. They answer slightly different questions, and the swatches show you the difference.

Names for each step

With Show nearest color names on, each swatch is labeled with the closest match from a curated list of about 4,900 open-source color names. The names are fun, and they're also practical: "Elite Teal" in a style guide is easier to remember than #062F2C, its label in the curated list. The matching uses the CIEDE2000 color difference, so the name is the closest-looking one, not just the nearest RGB numbers.

Copying and exporting

  • Click any swatch to copy its HEX code.
  • Copy row copies one row as a list, one code per line.
  • Copy all as list copies all three rows with comment headers, ready for a CSS file or a note.
  • Download PNG saves a swatch sheet with every code printed under its color, handy for mood boards and client presentations.

Which steps can carry text?

A ramp is only useful in an interface if you know where text stays readable. For the teal example, with white text and with near-black #1C1B18 text:

SwatchWhite textDark text
Shade 40% #09474210.5:11.6:1
Shade 20% #0C5E587.6:12.3:1
Base #0F766E5.5:13.2:1
Tint 20% #3F918B3.7:14.6:1
Tint 40% #6FADA82.6:16.7:1
Tint 80% #CFE4E21.3:113.0:1

Body text needs 4.5:1 under WCAG AA. So white works from the base color downward, and dark text from the 20% tint upward. The 20% tint is the awkward middle step: dark text just passes, white fails. That's typical. Most ramps have one or two steps around the middle that suit borders and large shapes but not text. Check your own steps in the contrast checker.

Practical uses

  • Interface states: a tint for hover backgrounds, a shade for pressed buttons, a tone for disabled controls.
  • Charts: tints of one color for a sequential scale, such as a heat map from light to dark.
  • Illustration: shades for shadows and tints for highlights keep a drawing in the same color family. Tones are often better than pure shades for natural-looking shadows.
  • Painting and decorating: paint-chip strips are tint series from one base pigment. The linear-light mode is the closest match to how pigments behave.

For a scale named 50 to 950, use the Tailwind color generator. To space lightness evenly with contrast grades for text, use the monochromatic color scheme generator. To mix any two colors, not just with white, black or gray, open the color mixer.

FAQ

What's the difference between a shade and a hue?

A hue is the basic color family, such as red, blue or teal. A shade is that hue darkened with black. Every shade of teal has the same hue.

How many steps should I use?

Five to ten for most design work. Use up to twenty if you want to pick the exact in-between value by eye.

Why don't my tints look like the ones from another site?

That site probably mixes in a different space, or uses a different gray for tones. Switch the mixing mode until they match. sRGB is the most common.