Skip to content
OnlineToolPro

Browse categories

YouTubeTextImagesPDFsDeveloperMarketingProductivityCalculatorsFinanceSEOColorCSSAll tools

All tools

Color Shades Generator

Turn one color into a full palette of tints and shades.

  • 100% free
  • Exports CSS variables
5

Your palette

  • 100
    #dae9e3
  • 200
    #b4d3c7
  • 300
    #8fbdac
  • 400
    #6aa690
  • 500
    #449074
  • Base
    #1f7a58
  • 700
    #1a6649
  • 800
    #15513b
  • 900
    #103d2c
  • 1000
    #0a291d
  • 1100
    #05140f

Last reviewed by the OnlineToolPro team

What is the Color Shades Generator?

Get lighter tints and darker shades of any color, arranged from lightest to darkest like a design-system scale, with the HEX code of each and ready-to-paste CSS variables.

How it works

How to use the Color Shades Generator

3 simple steps. No experience needed.

What can you use it for?

  • Build hover and background colors from a brand color.
  • Create a color scale for a design system.
  • Find a lighter version of a color for backgrounds.

Building a color scale

Design systems use a scale of one color from very light to very dark — for backgrounds, borders, hover states and text. Choose how many tints and shades you want on each side of your base color (from 2 to 9), then copy the HEX codes or CSS variables.

Tint, shade and tone

A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with gray. This tool generates tints and shades in even steps.

FAQ

Frequently asked questions

How are tints and shades made?

Tints mix the color with white; shades mix it with black, in even steps.

How do I use the CSS variables?

Paste them into your stylesheet's :root block, then use them anywhere with var(--name).

Related tools

Other tools you might find useful next.

More Color Tools

Convert, check and build color palettes. 3 free tools.

Browse Color tools
Other categories:YouTubeTextImagesPDFs