#4466EEBase color#5775F010%#6985F120%#7C94F330%#8FA3F540%#A2B3F750%#B4C2F860%#C7D1FA70%#DAE0FC80%#ECF0FD90%#FFFFFF100%#4466EEBase color#3D5CD610%#3652BE20%#3047A730%#293D8F40%#22337750%#1B295F60%#141F4770%#0E143080%#070A1890%#000000100%#4466EEBase color#4A69E310%#506BD820%#566ECD30%#5C70C240%#6273B750%#6876AC60%#6E78A170%#747B9680%#7A7D8B90%#808080100%A color shades generator takes one base color and builds a monochromatic scale of lighter and darker versions of it. From a single input such as #4466EE, it produces a row of tints that step toward white, a row of shades that step toward black, and a row of tones that step toward gray. Each swatch is a real color you can copy as HEX, RGB, or HSL and drop straight into CSS, a design file, or a theme configuration.
The three scales come from the classic definitions used in color theory. A tint is the base color mixed with white, which raises its lightness while keeping the same hue. A shade is the base mixed with black, which darkens it. A tone is the base mixed with gray, which reduces its intensity and gives a muted, more sophisticated version of the color. Having all three from one input is what lets you build a coherent palette: a button and its hover state, a set of chart series, or the light and dark surfaces of an interface, all derived from a single brand color.
The generator runs entirely in your browser. The color you enter is parsed and the scales are computed with client-side JavaScript, so nothing is uploaded, there is no account, and your work is never tracked. It accepts HEX, rgb(), hsl(), and common CSS color names, lets you set how many steps each scale contains, and updates every swatch instantly. Once the page has loaded it works offline.
Type or paste a color in any common syntax: a HEX code like #4466EE, an rgb() or hsl() value, or a CSS color name such as teal.
Choose how many variations each scale should contain. More steps give a finer gradient from the base toward white, black, or gray.
The tool shows three scales side by side, each swatch labelled with its HEX value and the percentage mixed toward the target color.
Click any swatch to copy its value. Switch the copy format between HEX, RGB, and HSL to match the syntax your project expects.
One base color produces three full scales at once: lighter tints, darker shades, and muted tones toward gray.
Each swatch is available as HEX, RGB, and HSL, so you can paste it directly into CSS, a design tool, or a theme file.
Set from 2 to 20 steps per scale to control how fine the gradient is between the base color and white, black, or gray.
Accepts 3- and 6-digit HEX, rgb() and hsl() values, and common CSS color names, all normalised to the same swatches.
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX, RGB, and HSL values you can copy.
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!