Color Shade and Tint Generator

Generate shades and tints of any color. Create darker and lighter variations for complete color scales.

Color Shade and Tint Generator tool

Loading...

Example

Input: Base color #C4653A, 5 steps

Result: Tints #CE7F5B, #D8987C, #E2B29D, #EBCCBD, #F5E5DE; Shades #A35430, #834327, #62331D, #412213, #21110A

Tints mix the base color with white and shades mix it with black in equal steps of 1/6, so the first shade is 5/6 of each channel (196 x 5/6 = 163 = A3).

Tailwind-Style Scale from #C4653A (5 Steps)

StepHexMix
50#F5E5DE83% white
100#EBCCBD67% white
200#E2B29D50% white
300#D8987C33% white
400#CE7F5B17% white
500#C4653ABase color
600#A3543017% black
700#83432733% black
800#62331D50% black
900#41221367% black
950#21110A83% black

Computed with the generator. Step names follow Tailwind CSS; percentages are rounded.

  1. Enter your base color as a hex code in the Base Color (Hex) field.
  2. Choose the number of steps (5 to 20) to generate for both shades (darker variations) and tints (lighter variations) using the Number of Steps slider.
  3. View the full palette strip plus separate Tints (Lighter) and Shades (Darker) sections built from your base color.
  4. Read the hex code shown next to each tint and shade, or hover a swatch in the strip to see its hex code.
  5. Copy individual color values or export the entire scale as a set of CSS custom properties for your design system.

Shades vs Tints: Building a Color Scale

A tint is a color mixed with white, and a shade is a color mixed with black. This generator makes both from one base color, in 5 to 20 equal steps each way, so you get a scale from near-black to near-white. With #C4653A and 5 steps, the first tint is #CE7F5B and the first shade is #A35430.

Each step moves the red, green and blue values an equal share of the way toward white or black. With 5 steps, that share is 1/6 per step. With 10 steps, it is 1/11. The last step never reaches pure white or black, so every color in the scale keeps some of the base hue.

Scales like this are the backbone of a design system. Light tints work as backgrounds, badges and hover fills. Mid tones suit buttons and links. Deep shades are good for text, borders and pressed states. You can copy each color, copy a whole group, or copy a block of CSS custom properties named --color-tint-1, --color-shade-1 and so on.

Straight mixing is simple and predictable, but it is not the only method. Warm colors mixed with black can look muddy, and pale tints can look washed out. Some teams adjust hue or saturation by hand at the ends of a scale. To see which steps are dark enough for text, test them in the Color Contrast Checker.

Frequently Asked Questions

A shade is a color mixed with black, so it gets darker. A tint is a color mixed with white, so it gets lighter. A tone is a color mixed with gray, which makes it softer. This generator makes shades and tints only.
Set the steps to 5. You get 5 tints, the base and 5 shades, which is 11 colors, the same count as a Tailwind scale from 50 to 950. Put the base at 500, the tints at 400 down to 50, and the shades at 600 up to 950. Tailwind palettes are tuned by eye, so expect to adjust a few steps.
Most design systems use 9 to 11 colors per hue. Five steps on each side gives 11, which is plenty for most interfaces. Larger step counts are useful when you want to explore and pick a few favorites. Very fine scales are hard to tell apart in use.
Mixing warm colors such as orange, red or yellow with black lowers their brightness, and our eyes read dark orange as brown. It is a real effect of color perception, not a bug. For richer dark steps, some designers shift the hue slightly or raise the saturation by hand.

Related Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

HSL to Hex Converter

Convert HSL color values to hexadecimal codes. Enter hue, saturation, and lightness for instant hex output.

Color Tools

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Color Tools

Gradient CSS Generator

Create CSS gradients with a visual editor. Build linear, radial, and conic gradients with live preview.

Color Tools