Color Shades Generator
Enter a HEX or RGB color to explore a balanced shade scale, compare contrast, and copy ready-to-use color values.
Try #60784b or rgb(96, 120, 75).
Changing the picker updates the text value.
SOURCE COLOR
#60784B
rgb(96, 120, 75)
A QUICK WALKTHROUGH
How to use this tool
- Enter a HEX or RGB color, or choose a color with the picker.
- Review the generated lighter and darker shades and their contrast guidance.
- Copy individual HEX or RGB values, the CSS variables, or download the scale as a CSS file.
How the shades are made
The generator blends the source color toward white for lighter steps and toward black for darker steps. It preserves the hue direction without pretending that every shade has the same perceived brightness, so always check the result in the context where you will use it.
Contrast is a guide
Each swatch reports its contrast against white and black using the WCAG relative-luminance formula. A ratio of 4.5:1 is a common minimum for normal text and 3:1 for large text; verify the actual font size, weight, background, and adjacent colors in your interface.
Local and exportable
Parsing, shade generation, copying, and CSS download happen locally in the browser. The downloaded file contains custom properties under :root and does not include your input anywhere else.
GOOD TO KNOW
Common questions
Which color formats are accepted?
Use six-digit or three-digit HEX, or RGB values such as rgb(96, 120, 75) and rgb(96 120 75). The parser also accepts percentages in RGB components.
Are the shades guaranteed to be accessible?
No. Contrast depends on the text, size, weight, and surrounding background. The ratios are a useful starting point, not an accessibility approval.
Does this upload my color?
No. The calculation and exports run entirely in your browser.