Uwarp

Tint & Shade Generator

Tint & Shade Generator
Color 1
Base10%20%30%40%50%60%70%80%90%

Help Us Improve

—

(—)

Tint and shade generator for hex colors

Create tints and shades from any hex. Build color shading scales in 5%, 10%, or 20% steps—export HEX, RGB, CSS, or JSON in your browser.

What is a tint and shade generator?

A tint and shade generator takes a base hex and produces lighter color tints and darker shades in even steps—useful when you need a full color shading scale for buttons, borders, and surfaces. Paste one or more hex values, pick 5, 10, or 20 stops per side, then copy swatches or export token-ready HEX, RGB, CSS, or JSON. Tints and shades are calculated locally in your browser with the same RGB math used in common design tools.

What this generator does

From a single hex to a full ramp of color tints and darker shades.

  1. Tints and shades from hex: Enter a base color and get a row of lighter tints and a row of darker shades—each stop labeled by percent from the base.
  2. 10% tint and shade steps: Choose 10 stops per side for classic 10% increments, or switch to 5 or 20 when you need fewer or finer color shading steps.
  3. Color tints for UI states: Map light tint shades to hover backgrounds and dark shade variants to pressed or disabled states without hand-mixing every swatch.
  4. Hex generator output: Every swatch shows a copy-ready hex value; toggle # on copy or export a full list in HEX, RGB, CSS variables, or JSON.
  5. Related palette bases: Insert complementary, split complementary, analogous, or triadic hex bases from any palette to expand a color shading set.
  6. Share and download: Encode palettes in the URL hash or save the grid as a PNG for docs and handoff.

How to build a color shading scale

A practical workflow from brand hex to design tokens.

  1. Paste hex color(s): Type space-separated six-digit codes or use the eyedropper—three-digit shorthand is expanded automatically.
  2. Make tints and shades: Submit to render shade and tint tables: base in the first column, then progressively lighter tints and darker shades.
  3. Pick step density: Use 10 for 10% steps, 5 for 20% jumps, or 20 for 5% increments when you need a longer shade-of-color ramp.
  4. Export or copy: Click a swatch to copy hex, open Export for CSS or JSON tokens, or share a link that restores your palette.

Tips for tint and shade ramps

Even color shading scales still need accessibility and brand checks.

  1. Pair light tints with dark shades: Use the lightest tint shades for subtle fills and the deepest dark shade stops for text on pale backgrounds—then verify contrast.
  2. Check contrast on real pairs: A mathematically even ramp does not guarantee readable text—test pairs on /contrast-checker before shipping.
  3. Name tokens by step: Export CSS custom properties and map stops to names like primary-100 through primary-900 in your design system.

Who uses tint and shade tools

Anyone building a coherent shade-of-color system from one brand hex.

  1. UI designers: Explore color tints and darker shades visually before locking a palette in Figma or your spec.
  2. Front-end developers: Generate Sass or CSS custom properties that mirror a color shading scale from design.
  3. Design system authors: Draft full tints-and-shades ramps before publishing tokens in documentation.
  4. Indie makers: Ship landing pages with consistent light and dark variants from a single accent hex.

Why use this generator

Precise tint and shade math with export-ready hex output.

  1. Predictable color shading: Each RGB channel mixes toward white for tints and scales toward black for shades—the same approach as Chrome DevTools color pickers.
  2. Multiple export formats: HEX, RGB, CSS variables, and JSON reduce copy-paste errors into stylesheets and token files.
  3. No upload required: Colors stay on your device—nothing is sent to a server.
  4. Bookmarkable URL: Share a link that restores your hex list, step count, and copy preferences.

Technical notes

How tint and shade calculation works on this page.

  1. Tint formula: Per channel: new = round(current + (255 − current) × ratio).
  2. Shade formula: Per channel: new = round(current × (1 − ratio)).
  3. Step ratios: 5, 10, or 20 evenly spaced ratios from base (0%) through 80–95%—10 steps equals 10% tint increments.
  4. Processing: All calculations run client-side; share links encode state in the URL hash only.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools