Generate tints and shades of any color, from lightest to darkest. Copy HEX codes for your palette or design system. Free online color shades generator.
On this page
About this tool
Generate a range of lighter and darker swatches from a base color.
How to use Color Shades Generator
Choose Base color and enter a Color name.
Inspect the numbered shades and click a swatch to copy HEX.
Copy CSS variables or the Tailwind CSS v4 theme output.
Worked example
Name a blue base color brand and compare its lighter backgrounds with darker text candidates.
Does a shade number guarantee a contrast ratio?
No. Numbers identify palette steps, not accessibility results. Check foreground and background combinations.
Is this an official Tailwind palette?
It is a generated palette in a compatible output format, not a claim that these are Tailwind’s built-in colors.
Explore Color Tools · More practical guides
Personalize your experience. Open with Ctrl+U (Option+U on Mac). Preferences stay in this browser when storage is available.
Menu language English (USA) Español اردو Accessibility Profiles Custom settings Vision support Reading support Reduced motion Motor support Focus support Oversized widget
Screen Reader Contrast + Smart Contrast Highlight Links Bigger Text Text Spacing Pause Animations Dyslexia Friendly Cursor Tooltips Page Structure Line Height Text Align Dictionary Saturation
Read aloud assistance Uses browser speech voices to read page text or selected text. This is not a replacement for NVDA, VoiceOver or another full screen reader. Available voices and speech processing depend on your browser and device.
Read page Read selection Pause / resume Stop reading
Reset All Accessibility Settings Move / Hide Widget Widget positionBottom right Bottom left Hide widget for 1 hour Restore at any time with Ctrl+U (Option+U on Mac).
Accessibility statement and help