MIGHTYPAINT COLOR TOOL
Shade & Tint Generator
Generate lighter tints and darker shades from a base color, copy swatches, and export CSS variables.
Color Lab
Invalid HEX
Copied!
Generated Palette
Swipe to view the full palette.
How it works
Pick a base color, choose how many steps you need, then generate a full tint-to-shade scale instantly.
What are tints & shades?
Tints are lighter color mixes. Shades are darker color mixes. Together they create a useful palette system.
Why extend your palette?
Faster design iterations
Generate complete color scales in seconds instead of hand-picking each value.
Consistent visual hierarchy
Use tints for backgrounds and shades for text to build clear, predictable layers.
Seamless theme variations
Swap one base color and regenerate an entire theme without losing relationships.
Accessibility checkpoints
Export your palette and test contrast ratios across the full scale.
Using the controls
Base Color
Enter a HEX code or use the color picker to set your starting hue.
Steps
Choose how many tints and shades to generate on each side of the base.
Interval %
Set the lightness distance between each step. Higher values create more dramatic shifts.
Generate Swatches
Click Generate Palette to render the full spectrum, or adjust sliders for live updates.
CSS Export
Copy the generated :root block and paste it into your stylesheet or design tokens.
Inspecting your swatches
Tints
Use for backgrounds, disabled states, subtle highlights, and hover overlays.
Base
Primary buttons, headers, key brand elements, and focal accents.
Shades
Text, borders, shadows, deeper accents, and active states.
Copying & exporting colors
Individual swatches
Click any swatch to copy its HEX value instantly. Use this when you only need one or two colors for a quick mockup.
Full CSS export
Use the Copy CSS Variables button to grab the entire :root block. Paste into your stylesheet and reference colors like var(--tint-3) or var(--shade-2).
Best practices for palette expansion
Choose 4–8 steps for most projects
Fewer steps keep the palette manageable while still providing useful variations.
Test extreme hues for contrast
Lightest tints and darkest shades may need contrast checks before use in UI.
Name variables consistently
Use semantic names like primary-100 through primary-900 for predictable scaling.
Add tokens to your design system
Export CSS variables into your component library for one source of truth.
Combine with other MightyPaint tools
Send generated swatches to the Contrast Checker to validate readability.
Frequently Asked Questions
?What formats does this generator support?
The generator outputs HEX codes and a CSS :root variable block. You can copy individual swatches or the full export.
?Can I generate only tints or only shades?
Currently the tool generates both tints and shades together. You can ignore the side you do not need, or set steps to a low number for a minimal set.
?How do I integrate the CSS export into my project?
Copy the :root block into your global stylesheet. Reference variables with var(--tint-1), var(--base), or var(--shade-2) in your component CSS.
?Are these swatches guaranteed to meet accessibility contrast?
Not automatically. Use the MightyPaint Contrast Checker to verify that your chosen tints and shades provide enough contrast for text and UI elements.
?What step count should I use?
For most projects, 4–8 steps per side gives you enough range without overwhelming your palette. Use more steps only when you need fine-grained control.
With the Shade & Tint Generator, you can transform a single hue into a robust working palette in seconds, then copy swatches or export CSS variables for your next project.