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.
  • 01

    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.

  • 02

    Check contrast on real pairs

    A mathematically even ramp does not guarantee readable text—test pairs on /contrast-checker before shipping.

  • 03

    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.

  • 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.

  • Multiple export formats

    HEX, RGB, CSS variables, and JSON reduce copy-paste errors into stylesheets and token files.

  • No upload required

    Colors stay on your device—nothing is sent to a server.

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

Sources & References

Authoritative references on color tints and shades, the RGB color model, and the design token workflow this generator supports.
  • “A tint is a mixture of a color with white, which increases lightness. A shade is a mixture with black, which reduces lightness. Creating tint and shade scales is fundamental to building cohesive color systems.”
    — Wikipedia — Tints and shades

    Tints and shades in color theory: Tints blend each RGB channel toward 255 (white), shades blend each channel toward 0 (black). This tool generates both directions simultaneously in configurable step increments. en.wikipedia.org/wiki/Tints_and_shades

  • “The RGB color model represents colors as combinations of red, green, and blue intensity values. Channel-wise mixing is the standard approach for generating color ramps in digital design tools.”
    — Wikipedia — RGB color model

    RGB color model for channel-wise blending: Each stop in the tint or shade scale applies a linear blend ratio per RGB channel. For tints: channel + (255 − channel) × ratio. For shades: channel × (1 − ratio). en.wikipedia.org/wiki/RGB_color_model

  • “Design tokens are platform-agnostic variables that store design decisions such as colors, spacing, and typography. A common naming pattern uses a base name plus a numeric step (e.g., primary-500).”
    — Wikipedia — Design token

    Design tokens and color naming conventions: The export formats (CSS custom properties and JSON) map tint and shade stops to numbered names following the design token convention used in modern design systems. en.wikipedia.org/wiki/Design_token

Frequently Asked Questions

Quick answers about this tool—open a question to read more.