Tint and Shade Generator (Tailwind CSS 50–950 Scale)
Generate mathematically balanced tints (lighter) and shades (darker) for any base HEX color. Outputs the complete 11-step 50–950 color scale optimized for Tailwind CSS, CSS Custom Properties, and Figma design tokens.
11-Step Luminance Scale
Click any swatch card to copy its exact HEX code.
Export Design Scale Tokens
Ready to paste directly into your project codebase.
// Generating scale...The Science of Tints, Shades, and Modern UI Color Scales
Tints vs Shades vs Tones
In classical color theory and digital graphics:
- Tints (Steps 50–400): Created by adding pure white to a hue, increasing lightness and softening saturation. Used for light backgrounds, table row stripes, and badge surfaces.
- Pure Base (Step 500): The primary brand hue as originally specified in your brand guidelines.
- Shades (Steps 600–950): Created by adding pure black to a hue, decreasing lightness. Used for hover states, active states, dark mode surfaces, and high-contrast typography.
Why 50–950 Scales Standardized UI Design
Before Tailwind CSS popularized the 10/11-step scale, developers struggled with inconsistent states like $primary-light or $primary-darker.
With a numeric 50–950 scale, designers and engineers have a predictable mental model for every component:
- Default Button:
bg-brand-500 - Hover State:
hover:bg-brand-600(+100 shade) - Active / Pressed:
active:bg-brand-700(+200 shade) - Subtle Badge:
bg-brand-50 text-brand-700
UI Application Matrix for 50–950 Steps
| Step | Role in Design System | Typical UI Use Case | WCAG Contrast Considerations |
|---|---|---|---|
| 50 | Ultra-light tint | App background tint, table striping, notification banner fill | Requires dark text (step 800/900) for AAA readability |
| 100 | Soft tint | Inactive pills, card headers, subtle border tints | Pair with step 700+ for AA compliance |
| 200 | Light divider | Component borders, dividing lines, ghost button borders | Border contrast 3:1 against white backgrounds |
| 300 | Disabled accent | Disabled button states, secondary iconography | 3:1 graphic contrast |
| 400 | Mid accent | Secondary action buttons, subtle focus rings | Contrast check recommended for text |
| 500 | Base Brand Hue | Primary CTA buttons, brand logos, active tab indicators | Ensure text on button passes 4.5:1 (white or black) |
| 600 | Hover state | Primary button hover state, active pill backgrounds | Standard hover feedback |
| 700 | Active / Dark Text | Button click/active state, high-contrast link text on light BG | Passes 4.5:1 contrast against white backgrounds |
| 800 | Deep shade | Subtle dark mode cards, high-emphasis text | Passes 7:1 AAA contrast against white |
| 900 | Very dark shade | Dark mode backgrounds, dark navigation sidebars | Passes AAA with white text |
| 950 | Deep obsidian shade | Dark mode root background, high-contrast borders in dark theme | Highest possible contrast in dark themes |
Frequently Asked Questions
How does Pikka calculate the 50–950 lightness steps?
Rather than linear mathematical addition of white or black (which often washes out saturation or turns colors muddy), Pikka uses an adjusted HSL lightness curve with saturation scaling. This ensures step 50 remains delicately tinted without looking gray, while step 900 retains the hue identity of your original brand color.
How do I paste this scale into my Tailwind configuration?
Simply copy the Tailwind CSS code from the export box above, open your tailwind.config.js file, and paste it into the theme.extend.colors object. You will immediately have access to utility classes like bg-brand-500, text-brand-700, and border-brand-200.
Does Pikka upload my brand colors or palette data to any server?
No. Pikka is an entirely client-side web application. All calculations and exports happen locally inside your browser with zero latency and zero data collection.