Color Shade Generator

Generate tint and shade scales with exportable CSS variables.

The Color Shade Generator creates tint and shade scales from a base color, previews them as a gradient bar and exports ready-to-use CSS custom properties.

Color

Count

Mode

Output

{
  "mode": "tint",
  "count": 5,
  "colors": [
    "#4c7fef",
    "#739bf2",
    "#9ab7f6",
    "#c1d2f9",
    "#e8eefd"
  ],
  "cssVars": "--shade-1: #4c7fef;\n--shade-2: #739bf2;\n--shade-3: #9ab7f6;\n--shade-4: #c1d2f9;\n--shade-5: #e8eefd;"
}

How to use

Pick a base color.
Choose how many steps and whether to generate tints, shades or both.
Copy the colors or the CSS variables.

Frequently asked questions

How are tints and shades created?

Lightness is interpolated toward white for tints and toward black for shades.

Can the palette be shared?

Yes, color, count and mode are stored in the URL query parameters.

Color Palette Generator

Create harmonious color palettes with random, analogous, complementary and triadic modes.

Color Converter

Convert colors between HEX, RGB, HSL and HSV instantly.

Color Contrast Checker

Check WCAG contrast ratios for accessible text and UI.

Color Blindness Simulator

Preview how images look for common types of color blindness.

Color Gradient Generator

Create CSS linear gradients with custom colors and directions.

Color Name Finder

Find the closest CSS color name for any color value.