Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Shades Generator

Build a tint and shade scale from one base color and copy the numbered steps.

Base color

Updates live as you type.

Steps

Direction

Scale

Click a swatch to copy its hex value.

How to generate color shades and tints

  1. Pick a base color

    Type a six-digit hex code or use the color picker; the scale rebuilds the moment the value is valid.

  2. Choose steps and direction

    Set 5, 9, or 11 steps and pick tints and shades, shades only, or tints only.

  3. Copy the scale

    Click any swatch to copy its hex value, or use Copy all to grab the numbered scale as CSS variables.

Why use this tool

Tints and shades in one scale

Generate lighter tints above your base color and darker shades below, or run a single direction toward white or black.

Numbered 50 to 950 scale

Every step gets a familiar label, from 50 for the lightest tint to 950 for the darkest shade, the same convention used by modern UI color scales.

Click-to-copy swatches

Each swatch is a button that copies its hex value, and the base color is marked in place so you always know where it sits.

CSS variables export

Copy the whole scale as custom properties like --color-500 in one action, ready to paste into a stylesheet.

Legible labels on any color

Each label switches between dark and light text based on the swatch behind it, so the hex value stays readable at every step.

Local and free

All the color math runs in your browser with no signup, so nothing you try is recorded.

About this tool

A color shades generator takes a single brand or accent color and expands it into a full lightness scale: a run of tints that step toward white and shades that step toward black. It mixes your base color with white for the lighter end and with black for the darker end, holding the hue steady so every step still reads as the same color. The base color stays exactly where you put it, in the middle for a tints and shades scale, at the top for shades only, or at the bottom for tints only.

This is the raw material for a UI color scale. From one hue you get the lighter surface tints, the mid-tone you started with, and the darker values you need for hover, active, and disabled states, borders, and body text. The numbered 50 to 950 labels follow the convention popularised by modern CSS frameworks, where 500 is the base, smaller numbers are lighter, and larger numbers are darker. Naming shades this way beats eyeballing a fresh lighten or darken every time, because the whole team refers to the same fixed steps.

Pick 5 steps for a quick set, 9 for a balanced ramp, or 11 for a Tailwind-style 50 to 950 scale. Click any swatch to copy its hex, or copy the entire scale as CSS custom properties. For a multi-hue scheme built from several colors rather than one, use the color palette generator. To restate any swatch in another notation, open the color converter, and to check that a text and background pair from the scale is readable, run it through the contrast checker.

Frequently asked questions

What is the difference between a tint and a shade?
A tint is your base color mixed with white, so it looks lighter and softer. A shade is your base color mixed with black, so it looks darker and deeper. The tints and shades mode gives you both at once with the base color in the middle, while shades only and tints only run in a single direction.
Why are the swatches numbered 50 to 950?
The numbers are a lightness scale borrowed from modern CSS frameworks. In the default tints and shades mode, 500 is your base color, 50 is the lightest tint, and 950 is the darkest shade, with the steps in between filling the ramp. Referring to a color as 500 or 700 is clearer than describing a percentage of lighten or darken.
What formats can I copy?
Click any single swatch to copy its hex value. The Copy all button copies the whole scale as CSS custom properties, one per line, like --color-500: #hex, ready to paste straight into a stylesheet.
How do I make sure the colors are accessible?
A scale gives you options, but it does not guarantee contrast on its own. Pick a light step for the background and a dark step for the text, then confirm the pair meets WCAG AA or AAA with the contrast checker before you ship it.
Is my color sent anywhere?
No. All the color math runs locally in your browser. Nothing is uploaded, stored, or logged, so you can experiment freely and offline.

Related tools