A tone is what you get when you mix a pure color with gray, reducing its intensity without making it darker or lighter. This tool gives you full control over that process, letting you generate a complete range of muted variations from any color you choose. Tones are widely used in branding, editorial design, and interface work where vivid colors feel too aggressive. Learning to work with tones will help you build more refined and visually balanced color palettes.
What makes tones unique in color theory
Unlike shades that darken a color with black, or tints that lighten it with white, tones desaturate it with gray. The result is a color that retains its hue identity but loses its raw intensity and vibrancy. This muting effect makes tones ideal for backgrounds, neutral surfaces, and secondary UI elements. Many sophisticated design systems rely almost exclusively on toned palettes to achieve a calm, professional look.
Picking your base color
Start by selecting your base color with the color picker, or enter a HEX code manually in the input field beside it. The picker and the text field stay synchronized at all times, reflecting each change instantly across the entire tool. The Random button generates an unexpected color if you want to explore combinations you would not have chosen yourself. Click Reset at any time to bring every setting back to its original default state in a single click.
Choosing the gray used for mixing
This is the feature that sets the Tones Generator apart from the other tools in this series. Rather than mixing with a fixed neutral, you can define exactly which gray is used in the blending process. A warm gray like #A89880 will produce earthy, sandy tones that feel organic and grounded. A cool gray like #8090A0 will shift the palette toward slate and steel, giving it a colder, more technical feel. The gray preview bar below the input shows you the selected gray color at a glance. Click the ↺ #808080 button to return to the standard middle gray whenever you want a neutral baseline.
Selecting the number of tones
Use the number input to choose how many tones the tool should generate, anywhere between 3 and 50. A small palette of 5 to 7 tones is enough for most web projects with a limited set of surface colors. A larger palette of 20 or more gives you fine-grained control for design systems with many component states. The grid refreshes immediately with every change, so experimenting with different densities is fast and effortless.
Understanding the gray mix modes
Three mixing algorithms let you control how gray is introduced across the generated palette.
Linear blends gray in perfectly equal increments from the base color to the target gray. Every step adds the same proportion of gray, making the progression mathematically uniform. This mode works well in most situations and is the most predictable option for systematic design work. It is the best starting point if you are unsure which mode fits your project.
Ease-in (subtle) uses a quadratic curve that keeps the first tones very close to the original base color. The gray influence grows slowly at first, then accelerates significantly toward the end of the palette. This is useful when you want most of your usable tones to remain fairly vibrant, with only a few very muted values at the far end. It suits projects where brand color recognition must be preserved across most variations.
Strong (muted) applies an inverse curve that introduces gray more aggressively from the very first steps. The palette jumps quickly into muted territory, leaving very few tones near the vivid original color. This is the right choice when your design calls for an immediately desaturated, toned-down aesthetic throughout. It pairs well with warm or earthy gray targets to create rich, organic palettes.
Viewing your tones
Two display modes let you examine your palette in the format that matches your workflow.
Grid view presents each tone as a compact card showing its HEX value and gray percentage below the color block. The first card is always labeled Base with a black background label, so your original color is always easy to identify. Clicking any card copies the HEX value to your clipboard and displays a brief confirmation toast at the bottom of the screen.
List view lays out each tone as a full row with the HEX code, RGB values, and gray percentage all visible at once. The Base row uses bold black text to stand out from the progressively grayer tones beneath it. A Copied! badge appears momentarily beside the row when you click to copy a value.
Checking accessibility with WCAG contrast
Tones occupy a mid-range brightness that can make contrast evaluation less predictable than with pure tints or shades. The contrast checker compares every generated tone against a text color you define, displaying a WCAG compliance rating on each card. The default text color is white, which is appropriate for deeper tones but may fail on lighter, more desaturated values. Adjust the text color using the picker or the HEX input to test your palette against both light and dark text.
AAA confirms the contrast ratio exceeds 7:1, meeting the strictest accessibility standard for any text size. AA means a ratio above 4.5:1, sufficient for standard body text in most interface contexts. AA Large indicates the ratio meets the 3:1 threshold valid only for large or bold text. Fail signals that the combination must be avoided anywhere readable text appears on screen.
Exporting your palette
Once you are satisfied with your tones, the export panel provides four formats compatible with any development or design workflow. Variable names use tone throughout, so the output integrates cleanly alongside shade or tint files in the same project.
CSS Variables generates a :root block with properties from --color-tone-1 to --color-tone-N, ready to drop into any stylesheet. SCSS produces Sass variables for preprocessor-based workflows. JSON delivers a structured object for design token pipelines or JavaScript configuration files. JS Array outputs a clean array of HEX strings for use in canvas libraries, generative art tools, or data visualization scripts.