Color Shades Generator
Generate lighter tints and darker shades from any hex color with customizable step counts for web palettes and UI design.
Run tool
The Color Shades tool creates lighter tints and darker shades from any valid hexadecimal color value. Enter a base color code, such as #3498db or 3498db, and the generator automatically adds the leading hash prefix if omitted. Three-digit shorthand notations like #abc expand to full six-digit values before calculation.
Set the number of step increments to control how many variations appear in each palette group. By default, the tool produces ten lighter tints and ten darker shades, but you can adjust this step count to fit your design system requirements. You can also toggle tints or shades on and off independently to display only the specific tonal range you need.
Each generated color channel rounds to the nearest whole integer between 0 and 255 before conversion into a standard hex string. Use the resulting color codes for web design palettes, UI button states, hover effects, and typography contrasts.
Instructions
- Enter a hex color code in the Color field, such as #3498db or a three-digit shorthand value like #f30.
- Specify the number of variation steps you want to produce for each tonal group.
- Check or uncheck the Include Tints and Include Shades options depending on whether you need lighter tones, darker tones, or both.
- Run the generator to view the organized list of calculated color swatches and hex codes.
Examples
- Generate 5 tints and 5 shades for brand blue #1e88e5 to create hover and active button states.
- Input shorthand hex #f80 with 8 steps and only shades enabled to build a stepped dark amber palette.
FAQ
Do I need to type the hash symbol before my hex code?
No. If you omit the leading hash symbol, the tool adds it automatically before parsing the color value.
Can I use three-digit hex shorthand codes?
Yes. Three-digit shorthand codes such as #fff or #38a are expanded to six-digit equivalents like #ffffff and #3388aa.
What is the difference between a tint and a shade?
A tint is created by blending the base color toward white to make it lighter, while a shade blends the base color toward black to make it darker.
Can I generate only lighter tints without darker shades?
Yes. Uncheck the Include Shades option and keep Include Tints selected to produce only the lighter gradient values.