Set source colors
Start from the randomized Brand color. Add Primary, Secondary, Neutral, custom brand-book colors or the complete status group only when your system needs them.
Palette controlsGuide / Start here
From one color to framework-ready design tokens.
Generate complete scales, inspect real interfaces, verify foregrounds and contrast, then export without coupling your system to one framework.
Source → system
Source colors01
50–950 scales02
Semantic roles03
Five adapters04
--color-primary → semantic.primary → adapterFour-step workflow
Four steps from source colors to export.
Source editing and generated output stay separate throughout the workflow.
Read the generated system
Tintary builds 50–950 scales and light/dark semantic roles. Product interface shows operational patterns; Visual gallery stress-tests compositions and color relationships.
Product + GalleryAudit both modes
Open Quality audit before handoff. Review semantic contrast, shade foregrounds, borders and duplicate source colors across light and dark modes.
Quality auditSave, share or export
Use Workspace to save local versions, copy a route-native share link, download a JSON backup or export one of five framework adapters.
Workspace toolsWorkspace anatomy
Where each task lives.
01
Palette
Edit source families, status colors and border appearance.
Input
02
Canvas
Read generated scales, product patterns, gallery compositions and audit results.
Evidence
03
Workspace
Compare, import, save, share and export the current system.
Handoff
Know the difference
Random, reset and shuffle do different jobs.
Randomize palette
Changes every active source value.
Keeps roles, gaps, custom count, status presence and current route.
Reset
Returns to one new randomized Brand color.
Removes added colors and returns to Product; named local themes stay.
Shuffle mix
Remixes Palette Lab widget roles and shades.
Preview-only: source colors, saved themes and exports never change.
How it works / Contrast
Foreground selection and contrast validation.
Tintary separates fast foreground selection from standards-based accessibility validation. A good heuristic result can still fail the audit.
01 / Choose
Y/luma foreground heuristic
Tintary converts the background to 8-bit RGB and applies the luma weights commonly called the YIQ heuristic in UI code.
Y′ = (299R + 587G + 114B) / 1000Y′ ≥ 128 selects #111318; otherwise Tintary selects #FFFFFF. The 0.299, 0.587 and 0.114 weights follow ITU-R BT.601 luma coefficients. This chooses a candidate foreground; it does not prove WCAG conformance.
02 / Validate
WCAG contrast ratio
Tintary calculates relative luminance from linearized sRGB, then compares the lighter and darker colors through Culori.
contrast = (L1 + 0.05) / (L2 + 0.05)Quality audit requires 4.5:1 for normal semantic text, actions and generated shade foregrounds; 3:1 for visible borders and non-text interface cues. Both light and dark modes are checked.
1. Select
Y/luma chooses #111318 or #FFFFFF for the generated background.
2. Measure
Culori calculates the WCAG ratio for the actual foreground/background pair.
3. Report
Quality audit flags failures by severity without changing source colors or exports.
Portable by design
The URL carries the palette.
Canonical paths store active source colors and preview location. Custom colors use compact c1, c2 aliases.
Shareable route
/colors/ffcc00/cc0099/e4268f
/visual-gallery/cardsPath: source colors + active preview.
Hash: versioned non-color workspace settings.
Handoff
One model. Five adapters.
Generated colors come from the same ThemeDefinition. Export format changes; color logic does not.
01
CSS variables
02
Tailwind v4
03
Material UI
04
Bootstrap 5.3
05
Figma tokens
Local autosave
Current workspace remains in browser localStorage.
Named themes
Save up to 20 local semantic snapshots.
JSON backup
Download and validate a portable versioned workspace file.
FAQ
Common questions.
Does Tintary upload my palette?+
No. Workspace persistence uses browser localStorage. Sharing is stateless: colors live in the URL path and non-color workspace settings live in a versioned hash.
What is the difference between source colors and semantic tokens?+
Source colors are inputs. Tintary turns them into raw shade scales, then maps those scales to stable roles such as background, surface, primary, accent, success and border.
Will Reset delete my saved local themes?+
No. Reset rebuilds the current workspace from one random Brand color, but named local theme snapshots remain available.
Why does Tintary use YIQ?+
Tintary uses a fast Y/luma heuristic, commonly labelled YIQ, to choose a light or dark foreground. Quality audit then calculates the WCAG contrast ratio separately; the heuristic alone is not an accessibility guarantee.
Next step
Start with source colors, then inspect and export.
Begin with one randomized color and add only the roles your project needs.