--- title: "Shades and Tints Generator - HEX Mix Table" description: "Generate shades and tints from a HEX color at exact white and black percentages. Compare swatches, copy colors, and download CSS or JSON in your browser." url: https://candoya.com/tools/shades-and-tints-generator/ locale: en type: browser-tool --- # Shades and Tints Generator Category: [Color & Design](https://candoya.com/tools/color/) ## What does a shades and tints generator do? A shades and tints generator mixes a base color with white to make lighter tints and with black to make darker shades. This tool pairs each mix percentage in a table, preserving your original HEX color. Choose the interval, copy individual swatches, or export the complete palette as CSS, JSON, or labeled HEX. The percentages describe **how much white or black is added**, not opacity or a design-system shade number. A 20% tint is 80% base color and 20% white. All results are solid, opaque colors calculated from the encoded sRGB channels. For each red, green, or blue channel `c` and mix fraction `p`, a tint is `round(c × (1 - p) + 255 × p)`; a shade is `round(c × (1 - p))`. For example, #336699 at 20% white becomes #5c85ad, and at 20% black becomes #29527a. For a perceptual, numbered interface scale, use [Color Shades for Figma](/tools/color-shades-for-figma/). To explore complementary or analogous hues, use the [Color Palette Generator](/tools/color-palette-generator/). This table focuses on reproducible white and black mixing recipes. ## How to use it 1. **Enter a base HEX color** - Paste a 3- or 6-digit HEX value, choose a color with the picker, or load the example. 2. **Choose a percentage interval** - Use 20% steps for a compact table or 5% steps for finer comparisons. Each row adds that percentage of white on the left and black on the right. 3. **Copy or export** - Click a swatch to copy its HEX. Choose CSS variables, JSON with percentages, or a labeled HEX list to copy or download the entire table. ## Who it's for - **Brand designers** documenting exact white and black mixtures alongside a source color. - **Frontend developers** exporting percentage-labeled CSS values for borders, fills, and interaction states. - **Design students** comparing the effect of the same added percentage on lighter and darker colors. ## Expert note A 50% white mix of black is #808080 here, not the brighter result from linear-light sRGB. Equal channel-mix intervals are not equal perceptual lightness steps. Keep the chosen mixing space consistent when reproducing this table in other software. ## Frequently asked questions ### Are my colors uploaded? No. HEX parsing, color mixing, and export creation run in your browser. Your entered colors are not sent to a processing server. ### Is the shades and tints generator free? Yes. All mixing intervals, individual color copies, and complete palette exports are free and require no account. ### How many tints and shades can I generate? Choose 5%, 10%, 20%, or 25% increments. These produce 20, 10, 5, or 4 tints and the same number of shades, plus your original color. Every table includes 100% white and 100% black. You can generate as many tables as you need. ### What is the difference between a tint, shade, and tone? A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with gray. This tool generates tints and shades in encoded sRGB. It does not simulate physical paint, whose results depend on the pigments and materials. ### Why do some rows have the same HEX value? White mixed with white stays white, and black mixed with black stays black. Near those endpoints, rounding to 8-bit channels can also repeat a HEX value. The table keeps these rows because their percentages still describe different mixing recipes. ### Can I reproduce a tint with CSS color-mix()? Yes. For example, color-mix(in srgb, #336699 80%, white 20%) uses the same mixing space and ratio as the 20% tint. This tool rounds its output to 8-bit HEX, while the browser may retain greater precision internally. Specify srgb explicitly when matching these results. ### Do the generated colors guarantee accessible contrast? No. A mixing percentage does not guarantee enough contrast between two palette colors. Check the actual foreground and background pair with a contrast checker. The black or white labels on this page are chosen for readability on their own swatches. ## Related tools - [Color Mixer](https://candoya.com/tools/color-mixer/) - [Color Palette Generator](https://candoya.com/tools/color-palette-generator/) - [Color Shades for Figma](https://candoya.com/tools/color-shades-for-figma/) - [Color Contrast Checker](https://candoya.com/tools/color-contrast-checker/) --- *Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*