Color desk
Color Shade Generator
Darken a color by mixing it with black.
Color Shade Generator: TOEA applies this fixed formula: Shade = color × (1 − amount) + black × amount. Color math runs locally in your browser. Runs 100% locally in your browser with zero server file uploads.
- Category
- Everyday tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Shaded HEX
#BB5611
- Shaded RGB
- rgb(187, 86, 17)
Shade = color × (1 − amount) + black × amount- Results are deterministic sRGB mathematical transformations; display appearance depends on your monitor and color profile.
- HEX input accepts #RGB or #RRGGBB notation. Values stay in your browser and are not uploaded.
Shades for states and text
A 10–20% shade of a button color is a common hover or pressed state, dark enough to notice without looking like a different color. Heavier shades of 60–80% black turn a brand color into a deep tone for headings or text that still reads as part of the palette, and those are the steps most likely to pass contrast on a white background. Build every step from the original base so the scale stays even.
When dark versions turn muddy
Mixing with black scales every channel equally, which keeps the hue but not how we name it. Dark yellow reads as olive, dark orange as brown, and dark pink as maroon, even though the math is doing exactly what it should. If a shade looks dirty, designers often nudge the hue slightly, for example yellow toward orange, before darkening. The color mixer lets you darken toward a deep navy or brown instead of pure black for a richer result.
How to use it
- Enter valid #RGB or #RRGGBB values and any requested percentage.
- Run the fixed browser-local color operation.
- Review the swatches and copy the result or palette values.
Privacy & limitations
Color values stay on this device. Contrast output is a mathematical checker, not a blanket WCAG compliance guarantee; context, font rendering, non-text contrast, and user interface states still need review.
Related tools
Frequently asked questions
How does the Shade Generator work?
It uses Shade = color × (1 − amount) + black × amount.
Which HEX formats are accepted?
Use three-digit #RGB or six-digit #RRGGBB sRGB notation. Alpha channels and named colors are not accepted.
Does the contrast result guarantee accessibility compliance?
No. It is a mathematical contrast checker for the reported colors and text thresholds, not a blanket compliance guarantee.
Free tool · runs in your browser · no account required