Color Shades Generator
Generate tints and shades for any color. Choose a base color and number of shades, get HEX, RGB, and HSL values instantly. Free, 100% in your browser.
Reference
What are tints and shades?
In color theory, a tint is any color mixed with white (making it lighter), and a shade is any color mixed with black (making it darker). Together, they form a monochromatic palette — variations of a single hue at different lightness levels. This tool generates a complete scale from white through your base color to black, giving you a ready-to-use color ramp for design and development.
Use cases for color shades
Design systems — generate a 9-step or 11-step shade scale for a brand color, following the pattern used by Tailwind CSS (50–950), Material Design, and most modern design systems. UI component states — use lighter tints for backgrounds and hover states, the base color for primary actions, and darker shades for text, borders, and active states. Data visualization — create sequential light-to-dark color scales for choropleth maps, heatmaps, and charts where intensity represents magnitude. Accessibility — find shade pairs that meet WCAG contrast ratio requirements (4.5:1 for normal text, 3:1 for large text).
How shades are generated
Shades are generated by linearly interpolating in RGB space from white (#FFFFFF) through the base color to black (#000000). For N shades, the base color appears at the midpoint of the scale. Each step blends evenly, producing consistent lightness progression. Output is available in HEX, RGB, and HSL formats — copy individual values or the entire palette at once.
Privacy
All color generation runs 100% in your browser. No data is sent to any server.