What Are Tints and Shades, and How Does Tint & Shade Generator Match Chrome DevTools, Sass, Less, and PostCSS?

Updated

A tint is a color mixed with white, which makes it lighter. A shade is a color mixed with black, which makes it darker. Tint & Shade Generator (maketintsandshades.com) takes one or more hex colors and produces a set of tints and shades for each, with the stated goal of matching the output of Chrome DevTools, Sass, Less, and PostCSS. That match matters if you define color scales in CSS preprocessors or read them from browser devtools and want the numbers to line up instead of drifting between design and code.

Tints vs. shades in one line each

  • Tint: base color + white → lighter, lower saturation in appearance.
  • Shade: base color + black → darker, often reads as more saturated.

A single base color therefore expands into a ramp: several steps lighter than the base, the base itself, and several steps darker. Design systems use these ramps for hover states, borders, backgrounds, and disabled states so every variation stays visually related to the brand color.

What the tool actually does

From the page itself, the generator works like this:

  1. You enter at least one valid hex color. Multiple colors can be entered separated by spaces.
  2. You can also pick a color with a color picker instead of typing hex.
  3. You choose how many steps to generate: 5, 10, or 20.
  4. You can toggle Show hashtags so the output hex values include the # prefix.
  5. You export palettes in several formats: Hex, #Hex, RGB, CSS, JSON.
  6. You can generate a shareable link to send the exact palette to someone else.

The output is a set of hex values, which is what makes it directly usable in stylesheets, design tokens, or a JSON theme file.

Why "matching Chrome DevTools, Sass, Less, and PostCSS" is the point

Each of these tools can lighten or darken a color, but they do not all use the same math:

  • Sass has lighten() / darken() and also mix() with white or black.
  • Less has lighten() / darken() and mix().
  • PostCSS color functions (via plugins) follow their own implementation.
  • Chrome DevTools shows computed color values and offers its own color manipulation in the picker.

If your design tokens are generated with one method and your CSS preprocessor produces another, the same "20% lighter" can come out as two different hex values. The result is a subtle mismatch: a hover state that looks slightly off, or a design handoff where the developer's output doesn't equal the designer's swatch.

Tint & Shade Generator's stated purpose is to produce tints and shades that match the output of those tools, so the ramp you generate can be dropped into a Sass/Less/PostCSS workflow or checked against DevTools without a visible difference.

Who this is for

  • Frontend developers who need a consistent color ramp to paste into variables or tokens.
  • Designers who want to hand off exact hex values rather than approximate swatches.
  • Design system maintainers who need one canonical scale that survives the trip from design file to compiled CSS.

Practical workflow

  1. Get your base brand hex (for example from a style guide or logo).
  2. Enter it in the generator, or use Pick a color.
  3. Choose 5, 10, or 20 steps depending on how granular your system needs to be.
  4. Turn on Show hashtags if you're pasting directly into CSS.
  5. Export palettes as CSS or JSON for tokens, or Hex/RGB for documentation.
  6. Use Share link to hand the exact palette to a teammate.

Common sticking points

  • Invalid input: the tool requires at least one valid hex color; a malformed value produces an error rather than a palette.
  • Multiple colors: separate them with spaces — this is how you generate ramps for several brand colors at once.
  • Step count is fixed: the choices are 5, 10, or 20, so pick the closest to your system's needs rather than expecting an arbitrary number.
  • Matching is the goal, not a guarantee for every custom function: if your codebase uses a hand-rolled color function, compare a few values against the generated ramp before adopting it everywhere.

The short version: tints lighten with white, shades darken with black, and this tool exists so the ramp you generate agrees with the color math already used by Chrome DevTools, Sass, Less, and PostCSS — which is what keeps design and implementation from quietly diverging.