⬛ Shade Calculator
Pick a base color and a percentage to see it mixed toward black — instantly get the shaded hex and RGB values, with an original-vs-shaded preview.
🧮 Shade a Color
What is a Shade Calculator?
It darkens a color by scaling it toward black a set percentage of the way, channel by channel, and gives you back the resulting hex and RGB values — a fast way to build darker variants of a brand or UI color for hover states, borders, and dark surfaces.
Use it to build a light-to-dark color scale from one base hue, to derive hover and active states that stay recognisably related to your accent color, or to preview a darker variant before adding it to a design system.
❓ Frequently Asked Questions
How does the shade calculator work?
Pick a base color and a percentage. Each of its red, green, and blue channels is scaled down toward 0 (black) by that percentage, and the three darkened channels are combined back into a hex color.
What's the difference between a shade and a tint?
A shade mixes a color toward black, making it darker and more muted — useful for hover states, borders, and dark-mode surfaces. A tint mixes toward white instead, making it lighter. Both preserve the same hue.
What percentage should I use for hover or active states?
A common pattern is a 10–20% shade for a subtle hover state and a deeper 30–40% shade for an active or pressed state, though the right amount depends on your base color's lightness and your contrast requirements.
Does a 100% shade always produce black?
Yes — scaling any color 100% of the way toward black produces pure black (0, 0, 0) regardless of the starting color, since every channel is reduced all the way to zero.