Darker shades and lighter tints from one base color
Base color #6366F1 produces 5 progressively darker shades (mixing in black: #5457cd, #4547a9, #363885, #282960, #191a3c) and 5 progressively lighter tints (mixing in white: #7a7df3, #9294f5, #a9abf7, #c1c2f9, #d8d9fc).
'Shade' and 'tint' are specific, technical terms in color theory, not interchangeable synonyms for 'darker' and 'lighter' generally -- a shade specifically means mixing a color with black, while a tint specifically means mixing with white, which is exactly the distinction this tool's two separate output lists preserve.
The steps run from 15% through 75% mixing -- the first shade/tint in each list represents a subtle 15% mix (closest to the original base color), while the last represents a much more dramatic 75% mix (closest to pure black or white), giving a smooth gradient of options at different intensities.
Why this uses linear RGB mixing, not a perceptual color space
Linear RGB mix, not LAB. Steps are 15% through 75%. This blends colors by mixing RGB channel values directly and linearly -- a straightforward, fast approach, but not perceptually uniform. A more sophisticated method using the LAB color space would produce shades and tints that appear more evenly spaced to the human eye, since LAB is specifically designed to match human color perception more closely than raw RGB values do.
In practice, this means the perceived difference between consecutive shades or tints in this list might not feel perfectly even to the eye, even though the underlying mix percentages (15%, 30%, 45%, and so on) are evenly spaced numerically.
This whole family of colors (all 10 shades and tints) shares the same underlying hue as the base color, differing only in how much black or white has been blended in -- useful for building a consistent, cohesive UI color scale from a single brand or accent color.
Related color-generation and design tools
For a hue-based palette instead of light/dark variations of one color, the Color Palette Generator uses a different color-theory approach.
Once you've built a shade/tint scale, checking contrast between specific pairs for accessibility is a worthwhile next step -- the Color Contrast (WCAG) Checker handles that.
Frequently Asked Questions (FAQ)
What's the technical difference between a 'shade' and a 'tint'?
A shade specifically means the base color mixed with black, making it darker. A tint specifically means the base color mixed with white, making it lighter -- these are precise color-theory terms, not interchangeable general words for darker and lighter.
Why might the visual spacing between shades look uneven even though the mix percentages are evenly spaced?
Linear RGB mix, not LAB. Steps are 15% through 75%. This tool mixes colors linearly in RGB, which isn't perceptually uniform to the human eye. A LAB-color-space-based method would produce shades and tints that appear more evenly spaced visually, even though this RGB approach uses evenly spaced numeric percentages.
What range of mixing percentages does this generator use?
Linear RGB mix, not LAB. Steps are 15% through 75%. It generates 5 steps from a subtle 15% mix (closest to the original base color) up to a dramatic 75% mix (closest to pure black or white), giving a spread of intensities for both the shade and tint lists.
Do all the generated shades and tints share the same hue as the base color?
Yes -- mixing with black or white shifts lightness (and slightly desaturates), but the underlying hue stays consistent with the base color throughout the entire generated scale, which is what keeps the whole set feeling cohesive.
What is this kind of shade/tint scale typically used for?
Building a consistent set of UI colors from a single brand or accent color -- for example, using progressively darker shades for hover states or borders, and lighter tints for backgrounds or disabled states, all visually related to the same base color.
