Tool 06 — Color

Tint & Shade Generator

Generate perceptually uniform color scales in sRGB, Oklab, or LCH color space. Compare all three mixing methods side by side. WCAG contrast badges on every stop. Exports CSS custom properties, Tailwind config, SCSS maps, or JSON with Lab D50 values.

Deeper Dive

Tints, shades, and tones: building a color scale→

Base Color

Mix Space

Scale

Steps 11

Tint →

Shade →

Oklab Perceptually uniform lightness steps

Prefix

What is a tint and shade scale?

A tint is a color mixed toward white; a shade is a color mixed toward black. A tint-shade scale — typically 10–12 stops from near-white to near-black — is the standard way to represent a single brand color across all the use cases in a UI system. Lighter stops (50, 100, 200) are used for backgrounds, hover states and subtle borders. Mid-range stops (500, 600) are the primary interactive colors for buttons and links. Dark stops (700, 800, 900) are used for text on light backgrounds. This structure is used in Tailwind CSS, Material Design, Radix UI Colors and most design system frameworks.

Why Oklab produces better color scales than sRGB

When you mix a color toward white or black in sRGB, the perceived saturation changes unevenly — some stops look washed out or muddy relative to others. Oklab is a perceptually uniform color space where equal numerical steps correspond to equal perceived color differences. Interpolating toward white and black in Oklab keeps the saturation consistent across the scale and produces stops that feel evenly spaced visually. The practical result is a scale you can use at any stop without needing to manually push saturation up on the lighter stops — something you frequently have to do when generating scales in sRGB tools like the Figma color picker.

How to use a color scale in Tailwind CSS

The Tailwind export from this tool generates an object you paste into the extend.colors section of tailwind.config.js. Each stop becomes a utility class: bg-brand-500, text-brand-700, border-brand-200. Use stop 500 or 600 as your primary interactive color, stop 100 as a subtle background tint, and stop 800 or 900 for accessible text. The WCAG badges shown in this tool tell you exactly which stops can be used for text on white (white bg) and which can be used for text on dark backgrounds (dark bg).

Exporting to CSS custom properties and design tokens

The CSS export generates a block of --color-name-50 through --color-name-950 custom properties for use in any CSS file or design system. The JSON export follows the W3C Design Tokens Community Group format, compatible with Style Dictionary and Theo for automated multi-platform token distribution. The SCSS export generates a Sass map ($color-name: (50: ..., 100: ..., ...)) for use in SCSS-based design systems.

uicorn — free tools for designers and art directors

Frequently asked questions

How many stops should a color scale have?

10–12 stops is standard. Tailwind CSS uses 11 stops (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). Radix UI Colors uses 12. For most design systems, 10 stops (100 through 1000) provides enough range without redundancy.

Which color space should I choose — Oklab, LCH or sRGB?

Use Oklab for most color scales — it produces the most perceptually even results across the full range. LCH is similar but uses hue-chroma-lightness coordinates; it is useful if you want precise control over hue shift. sRGB is provided for compatibility with tools that require it, but produces visually uneven scales, especially for saturated colors.

Can I generate a semantic color system from multiple base colors?

Yes. Generate a scale for each semantic color (primary, secondary, success, warning, danger, neutral) and combine the CSS exports. Use a consistent naming convention (e.g. the semantic role as the scale name: --color-danger-500) so the scales work together as a system.

What does the WCAG badge on each stop mean?

Each stop is tested for contrast against both pure white (#FFFFFF) and pure black (#000000). The badge shows whether the stop achieves WCAG AA (4.5:1) or AAA (7:1) for normal text against each background. A stop marked AA-white means it can be used as text color on a white background at normal size.

How is this different from Tailwind's default color palette?

Tailwind's default palette is hand-crafted for general use. This tool generates a scale from your specific brand color — so the 500 stop is always exactly your base color. This is important for brand consistency; Tailwind's closest pre-defined color may be a different hue than your brand spec.

uicorn is and will always be free. Built by one person. Fuelled by coffee. Buy Lui a coffee

Related tools

Disclaimer — Tool 06 · Tint & Shade Generator

Perceptual Uniformity

Oklab and LCH mixing aim for perceptually uniform lightness steps, but no color model perfectly matches human perception across all hues and display devices. Generated scales should always be evaluated visually before use in production.

WCAG Badges

Contrast ratios shown on swatches are calculated using the WCAG 2.1 relative luminance formula against pure white and black. They are indicative — actual legibility depends on font size, weight, anti-aliasing, and display calibration.

Lab D50 in JSON Export

Lab D50 values in the JSON export use a Bradford D65→D50 chromatic adaptation matrix, consistent with Photoshop and standard ICC color management. Intended as a reference for press workflows.

Tailwind Scale Mode

Tailwind mode uses the standard 50–950 naming. Lightness distribution is determined by the selected mix space, not by Tailwind's own palette methodology. The base color snaps to its nearest perceptual stop. Always verify against your design system.

Liability

All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.