Tint & Shade Generator — Create Color Scales Instantly

Enter a base hex to get ten tints (color + white) and ten shades (color + black). Copy individual codes or export a full CSS or Tailwind scale.

#

Tints

Base color mixed with white (lighter)

  • 10% white
    #389738
  • 20% white
    #4EA24E
  • 30% white
    #64AE64
  • 40% white
    #7AB97A
  • 50% white
    #91C591
  • 60% white
    #A7D1A7
  • 70% white
    #BDDCBD
  • 80% white
    #D3E8D3
  • 90% white
    #E9F3E9
  • 95% white
    #F4F9F4

Shades

Base color mixed with black (darker)

  • 10% black
    #1F7D1F
  • 20% black
    #1B6F1B
  • 30% black
    #186118
  • 40% black
    #145314
  • 50% black
    #114611
  • 60% black
    #0E380E
  • 70% black
    #0A2A0A
  • 80% black
    #071C07
  • 90% black
    #030E03
  • 95% black
    #020702

What is a Tint and Shade Generator?

Tints and shades are the building blocks of UI color scales. A tint lightens your base by mixing in white—ideal for subtle backgrounds, hover washes, and disabled fields. A shade darkens the base with black—useful for borders, secondary text on light UI, and navigation chrome. This tool generates both ladders from one hex so you do not hand-pick ten slightly different greens in Figma.

How to Generate Tints and Shades

  1. Enter your base color hex code (default #228B22 shown on load).
  2. The tool generates 10 tints and 10 shades instantly as you type.
  3. Copy individual hex codes or export all values as CSS custom properties.
  4. Paste the Tailwind config snippet into tailwind.config.js or use tokens in Figma.

Tints vs Shades — What is the Difference?

A tint is your color mixed with white. Forest green #228B22 at 30% white might become #4BAF4F—a softer green for table stripes. A shade mixes black in. The same green at 40% black could land near #145214 for sidebar backgrounds. Tints read airy; shades read grounded. Using both from one base keeps the family cohesive.

How to Use Color Scales in UI Design

Map the lightest tint (e.g. 90% white on #228B22 → a pale #E8F5E9) to page backgrounds. Mid tints work for hover on outline buttons. Keep #228B22 as the primary filled CTA. Use 20–40% shades for label text on tinted panels, and the darkest shade for focus rings or dark-mode chrome. Example: background #E8F5E9, primary #228B22, hover tint #4BAF4F, body text #145214—then run #145214 on #E8F5E9 through our contrast checker before launch.

Frequently Asked Questions

What is the difference between a tint and a shade?
A tint mixes a color with white, making it lighter. A shade mixes a color with black, making it darker. UI scales often use tints for backgrounds and hover states and shades for text, borders, and pressed buttons.
How do I create a color scale for my design system?
Start with one brand hex, generate ten tints and ten shades, then map the lightest tints to surface tokens and the darkest shades to text or chrome. Export CSS variables or Tailwind keys and document which step is your primary 500/base.
How do I generate Tailwind color shades?
Use the Copy as Tailwind config button to get a brand object with 100–900 steps mapped from your generated tints and shades, with 500 set to your base hex.
What is the best way to create light and dark versions of a color?
Mix systematically with white for lights and black for darks rather than guessing in the picker—this keeps hue consistent. Verify contrast on each pair with a WCAG checker before shipping UI.

Explore harmonies with the palette generator, name your base color with the color name finder, and test accessibility with the contrast checker.