Color scales that just work.
Paste one color. Get a full, contrast-safe scale in the system you already use. No settings. No sign-up.
- ✓ Your color sits on 700
- ✓ Text on white from 700
- ✓ Evenly spaced
Free · Runs in your browser
Same color. Two scales.
Most generators spread lightness. Tintfield spreads contrast.
- ✓ Every step is distinct
- ✓ Your color on its natural step
- ✓ Readable everywhere
One color. Zero settings.
Tintfield places your color, spaces the steps and checks the contrast for you. You only decide when you want to.
Same step, same contrast.
Teal 600 and orange 600 pass the same checks. Write one rule for your whole palette: text on white starts at 600.
Speaks your system.
Tailwind's 50–950, Radix's 1–12, Material's tones. Tintfield uses the steps and names you already work with.
50 · 500 · 950
From color to code in three steps
1
Pick a color.
Paste a hex or start with one of ours.
2
Pick your system.
Tailwind, Radix, Material and more.
3
Export.
Tailwind, CSS or Design Tokens, light and dark.
Drop it straight into your project
@theme {
--color-teal-50: #eff8f8;
--color-teal-100: #e8f4f4;
--color-teal-200: #d3e5e6;
--color-teal-300: #b3d2d4;
--color-teal-400: #7db9bb;
--color-teal-500: #4ea2a6;
--color-teal-600: #238b90;
--color-teal-700: #0d7377;
--color-teal-800: #19585a;
--color-teal-900: #1e3b3d;
--color-teal-950: #172424;
}
Guides: Figma · Tailwind · CSS · Tokens
Coming soon
Tintfield for Figma
Your scales as Figma Variables, light and dark modes included. Change the color, and every variable follows.
One email when it launches. No spam. Unsubscribe anytime. Privacy
Questions
Yes. The generator is free, with no account and no limits.