What does Tonal Steps, Tints and Shades Lab generate?

It generates full tonal ramps, tints, shades, tones, neutral ladders, Tailwind 50-950 scales and Material 50-900 scales from a base HEX color.

Which mixing mode is recommended?

OKLab is recommended for most design work because it usually produces more perceptually even tints and shades than HSL, CIELab or sRGB-linear mixing.

Does the tool include accessibility contrast checks?

Yes. The contrast ladder reports WCAG contrast ratios and labels against white and black, plus APCA Lc values against white and black.

Auric Artisan · Documentation

Tints & Shades Generator User Guide

A complete workflow guide for generating tonal ramps, tints, shades, tones, neutral ladders, design system scales, contrast tables, OKLab lightness diagnostics, batch analysis and design-token exports from a single base color.

Published: May 24, 2026 Updated: May 24, 2026 Category: Guide Author: Chirag Bansal

Back to Documentation Auric Artisan Home

Overview

The Tints & Shades Generator is a browser-based palette engineering workspace. It starts with one HEX color and builds ramps through HSL lightness, relative luminance or contrast targets. It then adds tints, shades, tones, neutral ladders, 50–950 and 50–900 key sets, WCAG and APCA contrast, OKLab uniformity statistics and export formats for design systems.

1. Open the Lab

Tool URL: open Tints & Shades Generator.
Default state: the lab starts with base color #2563EB, HSL lightness engine, OKLab mixing, 11 steps, gamma 1.0, the 50–950 key set and only the Full ramp visible.
On-device math: color conversion, contrast analysis, charts, exports and batch analysis run in the browser.
Keyboard shortcuts: press 1 for HSL lightness, 2 for Equal luminance, 3 for Equal contrast and R for a random base color.

2. Workspace Layout

Lab tab: the main working surface with base color controls, engine selection, mixing mode, steps, gamma, visible sets, the ramp strip and steps, evenness stats, the lightness chart and base color details.
Ramps tab: every engine side by side with an evenness figure, the step-size and OKLab a/b charts, and the 50–950 and 50–900 key sets.
Contrast tab: every step against white, black or the base, with the WCAG 2.2 ratio, its rating, APCA Lc and the contrast ladder chart.
Data tab: the register of datasets and formulas the tool rests on, filterable by status.
Export tab: the ramp, the key set, the contrast table or a link as CSS, SCSS, JSON, CSV or URL, plus batch analysis under Analyse a list.
Reference tab: standards, formulas, citations and research notes in one searchable view, plus the CIE 1931 chromaticity diagram.

3. Base color

Color picker: use ts-base-picker to pick a base color visually.
HEX input: type a six-digit value such as #4A90D9 into ts-base-hex. Invalid values fall back to the default, #2563EB.
Random: the Random base button and R shortcut generate a random six-digit HEX color and immediately refresh the ramp.
Base diagnostics: the base info panel reports HEX, RGB, HSL, CIELAB, LCh, OKLab L, relative luminance and contrast against white and black.

4. Tonal engines

HSL lightness: sweeps HSL lightness from light to dark while preserving the base hue and saturation. It is fast and familiar, but not perceptually uniform.
Equal luminance: binary-searches HSL lightness to hit target relative luminance values. Use it when Y spacing matters more than HSL lightness values.
Equal contrast: steps WCAG contrast against black from 21:1 down to 1:1, which lands on the same colors as Equal luminance. The Lab view offers only the first two; this one stays reachable with the 3 key and saved links, and the Ramps tab shows the match.
Engine scope: the selected engine controls the main Full Ramp. Tints, shades and tones are generated by mixing the base color toward white, black and gray using the selected mixing mode.

5. Mixing modes

OKLab: recommended for most palette work because it usually gives smoother perceived spacing in tints, shades and tones.
CIELab: useful for legacy color-science workflows and comparison with older Lab-based palette tools.
sRGB Linear: blends in linear-light RGB before encoding back to sRGB. It is energy-correct but can feel less uniform to the eye.
HSL Shortest Arc: interpolates hue through the shortest path and blends HSL saturation and lightness. Use it when hue-arc behavior is the main design goal.
Recommended first pass: start with OKLab, then compare with CIELab and HSL if brand hue preservation or legacy output is more important than uniformity.

6. Steps, gamma and visible sets

Steps: choose 3 through 21 tonal stops. Tailwind-style scales often use 11 stops; Material-style scales use 10 stops.
Gamma: choose 0.4 through 2.6. Values below 1.0 bias more resolution toward light steps, while values above 1.0 bias toward dark steps.
Design scale: under Key sets in the Ramps tab, 50–950 and 50–900 generate named scale stops anchored at the base color. They borrow the Tailwind and Material key names only, not those palettes.
Visible sets: show or hide Full Ramp, Tints, Shades, Tones and Neutrals without changing the underlying generated data.
Neutrals: the neutral ladder is grayscale and uses the step count and gamma setting to distribute values.

7. Diagnostics and results

Tonal swatches: each visible set displays color chips, HEX labels and contrast against black.
Ramp strip preview: the Lab view shows the full ramp as one strip, then each step with its HEX, OKLab L and contrast against white, and says whether the base is itself a step.
Lightness distribution: the OKLab L chart visualizes how evenly the ramp moves from light to dark.
Design scale output: the Ramps tab prints the 50–950 or 50–900 key set as named scale chips and HEX values for handoff.
Perceptual uniformity: the stats panel reports mean Delta L, standard deviation, max deviation and number of steps.
Contrast ladder: the Contrast tab table reports each step's HEX, WCAG 2.2 ratio, rating and signed APCA Lc against the color picked under Against (white, black or the base), with an option to show the superseded APCA figure and the difference.

8. Exports and share URLs

What to take: in the Export tab, choose the ramp, the key set, the contrast table or a link to this view; only the formats that fit are offered under As.
CSS: :root custom properties named --tonal-0, --tonal-1 and onward, each noted with OKLab L, WCAG ratio against white and APCA.
SCSS: a $tonal map keyed by step index.
JSON: a provenance block plus each step's HEX, RGB, OKLab L, WCAG ratios against white and black and APCA Lc on white and black.
CSV: a flat table with the same columns for spreadsheet or analysis workflows.
Provenance: every file records the base, engine, mixing space, step count and gamma, so the ramp can be reproduced.
Download: writes a file named after the base, such as tonal-2563eb.css.
The contrast table: its own CSV or JSON, with each step's index and HEX, the color it is measured against (the one picked under Against in the Contrast tab), the WCAG ratio and rating, and the APCA Lc.
Copy to clipboard: copies the same text shown in the preview.
Share URL: the runtime can encode hex, engine, steps, gamma and mode in the URL.

9. Charts and batch analysis

Step sizes (Ramps tab): draws Delta L per step in OKLab. Bars more than 30 percent from the mean are highlighted for quick inspection.
The ladder (Contrast tab): draws contrast against the color picked under Against, with threshold lines at 3:1, 4.5:1 and 7:1.
OKLab a/b plot (Ramps tab): plots generated ramp, tint, shade and tone swatches in OKLab a/b space.
CIE 1931 Chromaticity Diagram (Reference tab): draws a spectral-locus background, D65 white point and gamut triangles for sRGB, DCI-P3, Rec.2020 and ProPhoto RGB.
Analyse a list (Export tab): paste one HEX per line or comma-separated values, then press Analyse. The tool reports Lab, OKLab L, relative luminance and tint/shade counts for each color.
Download the result: downloads tonal-steps-batch.csv with hex,L*,a*,b*,okL,Y,tints,shades for valid input colors.

10. Library saves and restore

Library asset type: the tool registers as a palette tool with id tonal-steps.
Palette capture: the Library binding scans the page for generated HEX colors and saves them as preview colors and asset data.
Full runtime state: shared tool-state capture reads window.AATonalSteps.getState(), which includes state, generated data and batch input.
Restore: full restore can apply the base color, engine, step count, gamma, mixing mode, scale type, visible-set toggles and batch text.
Best practice: use Library state when you need repeatable engineering review; use copied CSS, JSON or CSV when you need portable design-token handoff.

11. Recommended workflows

Design-token palette: set OKLab mixing, choose 11 steps, select the 50–950 key set, inspect WCAG labels, then export CSS and JSON from the Export tab.
Accessible UI ramp: use the Equal luminance engine, compare contrast against black and white, then choose foreground and background pairs from the table.
Brand tint system: start with the brand HEX, enable Tints and Shades only, compare OKLab and CIELab mixing, then export SCSS and CSV.
Neutral system: hide chromatic sets, keep Neutrals visible, tune gamma until the lightness chart fits your product surface hierarchy.
Research comparison: open the Ramps tab to see every engine run on the same base side by side, with an evenness figure for each in OKLab L, CIELAB L* or relative Y.
Palette audit: paste several brand colors into Analyse a list and copy the CSV to compare luminance and generated tint/shade counts.

12. Troubleshooting

The ramp falls back to #2563EB: check that the HEX value starts with # and has exactly six hexadecimal characters.
The ramp feels uneven: compare OKLab mixing with CIELab, then inspect the lightness chart and uniformity analysis.
The luminance engine creates harsh steps: equal steps in Y bunch at the dark end, so reduce step count or adjust gamma so the spacing is less compressed in one end of the ramp.
Design scale output is blank: open the Ramps tab and choose 50–950 or 50–900 under Key sets.
Batch input is ignored: use six-digit HEX colors separated by line breaks or commas.
Clipboard copy fails: some browsers require HTTPS or a user gesture for clipboard writes.