How to Generate Tints and Shades with Tint & Shade Generator

Updated

Tint & Shade Generator (maketintsandshades.com) turns a hex color you already have into a full ramp of lighter tints and darker shades, then lets you export that ramp as Hex, #Hex, RGB, CSS, or JSON. To use it, you need at least one valid hex color; you paste it into the input, pick how many steps you want (5, 10, or 20), and export or share the result. The tool's stated goal is to match the output of Chrome DevTools, Sass, Less, and PostCSS, so it's a good fit when you want a palette that lines up with what your build tools or browser already produce.

What you need before starting

  • At least one valid hex color. The tool rejects empty or invalid input with the message "Please enter at least one valid hex color."
  • A target number of steps. The available choices are 5, 10, and 20.
  • A destination format. Decide up front whether you want raw hex values, CSS, or JSON, since the export options differ.

Step-by-step: generating a palette

1. Enter your hex color(s)

Type one or more hex colors into the input field. If you use more than one, separate them with spaces. The page also offers a "Pick a color" control if you'd rather choose visually than type a value.

Expected result: the tool accepts the input and generates the tint/shade ramp for each color you entered.

2. Choose the number of steps

Select 5, 10, or 20 to control how many tints and shades are produced per color. Fewer steps give you a coarse ramp (useful for a quick set of surface or border colors); more steps give you finer gradations (useful for hover states, charts, or design tokens).

3. Toggle hashtags if needed

The "Show hashtags" option controls whether the output values are prefixed with #. Turn it on when you're copying values straight into CSS or HTML; turn it off when the consuming system expects bare hex strings (for example, some JSON configs or design-tool imports).

4. Export the palette

Use Export palettes and pick the format that matches where the colors are going:

Format Use it when
Hex You need plain hex values without the # prefix
#Hex You're pasting into CSS, HTML, or a tool that expects #
RGB Your target uses rgb() values
CSS You want ready-to-paste CSS declarations or variables
JSON You're feeding the palette into code, a design token file, or a script

5. Share the result (optional)

The Share link option produces a shareable link that encodes your palette, so a teammate can open the exact same colors and step count without you re-entering anything.

Common snags

  • "Please enter at least one valid hex color." This appears when the field is empty or the value isn't a valid hex color. Check for stray characters or a missing value.
  • Multiple colors run together. If you paste several colors without spaces between them, they'll be read as one invalid value. Separate each with a space.
  • Wrong prefix in your output. If your CSS breaks or your JSON import fails, check the hashtag toggle — the bare Hex and #Hex exports are not interchangeable.

When this tool is the right choice

Use Tint & Shade Generator when you already have a base color and need a consistent, tool-matched ramp you can export in a specific format. It's less useful if you're starting from scratch with no color in mind, or if you need perceptual color spaces like OKLCH — the tool works in hex and is built to mirror DevTools, Sass, Less, and PostCSS output, so its value is consistency with those systems rather than color-science flexibility.