Building a consistent design system requires a comprehensive range of tints (lightened with white) and shades (darkened with black). OmniTool Hub takes any primary brand color and calculates an exact 10-step scale matching the industry-standard Tailwind CSS 50 to 950 numerical hierarchy.
Key Property Parameters & Specifications
| Scale Step | Luminance Range | Standard Design Application |
|---|---|---|
| 50 - 100 | 95% - 90% Lightness | Subtle card backgrounds, badges, and active state highlights |
| 200 - 300 | 85% - 75% Lightness | Card borders, dividers, disabled inputs, and muted pills |
| 400 - 500 | 65% - 50% Lightness | Base brand color, primary buttons, icons, and focus rings |
| 600 - 700 | 40% - 30% Lightness | Button hover/active states, medium contrast text elements |
| 800 - 950 | 20% - 8% Lightness | Deep dark mode backgrounds, high-contrast headings and body copy |
Implementation Guide & Technical Reference
Exporting Tailwind CSS 50-950 Token Object
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd',
300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9',
600: '#0284c7', 700: '#0369a1', 800: '#075985',
900: '#0c4a6e', 950: '#082f49'
}
}
}
}
};Tailwind config integration.
Frequently Asked Questions (FAQ)
What is the difference between a tint and a shade?
A tint is created by adding pure white to increase lightness, while a shade is created by adding pure black to deepen darkness.
Can I export the generated scale directly into Tailwind CSS?
Yes. One click exports a ready-to-paste `tailwind.config.js` color object containing all keys from 50 to 950.
Does it support HSL or OKLCH color spaces?
Yes. The engine interpolates perceptual lightness curves to ensure smooth, natural color transitions without mudiness.
Can I copy individual HEX codes quickly?
Simply click any swatch in the scale to copy its HEX or RGB value to your clipboard.