Essential cookies keep Huevex running. With your permission we also measure how the site is used. Nothing optional loads until you choose. Cookie Policy
Enter any color and get its full tint and shade scale from 50 to 900, with a hex code for every step.
Copying is free and needs no account. Taking the scale into Tokara builds the full system - semantic colors, surfaces, borders and interaction states - where the existing plan limits apply.
A scale takes one color and turns it into a family: the pale tints you use for backgrounds and hover states, the base color itself, and the deeper shades you use for text, borders and pressed states. The 50 to 900 numbering is a convention borrowed from design systems - 50 is the lightest step, 500 holds the base color, and 900 is the darkest. Once a team uses the same numbers, a rule like “surfaces are 50, borders are 200, body text is 900” replaces a page of color decisions.
Tints are made by mixing the color with white, shades by mixing it with black. Mixing both is a tone. A good scale keeps the hue steady and moves only the amount of light, so every step still reads as the same color rather than drifting toward gray or toward a different hue.
The base color sits at 500. Light steps interpolate toward near-white and lose saturation as they climb, which is what stops pale tints from looking chalky. Dark steps move toward near-black and gain a little saturation, which is what keeps deep shades from turning muddy. Because the two directions are anchored separately, the ramp stays monotonic even when the base color is already very light or very dark - the 400 step can never end up darker than the 500 it sits beside.
This is the same logic Tokara applies when it builds brand scales for a whole palette, so a shade taken from this page will match the equivalent step in a full system rather than being a near miss that has to be re-picked later.
A handful of steps will do almost all of the work. Two lights for backgrounds, one mid step for default states, two darks for text and pressed states covers most interfaces, and every extra step is another decision to maintain. If a design needs a sixth tint to look right, the problem is usually that the base color is carrying too many jobs.
Copying a value here is free and needs no account. Taking the scale into Tokara is where plan limits apply, because that is where the rest of the system - semantic colors, surfaces, borders, interaction states and export - is generated.
Yes. The base color is placed at 500 untouched, and the other steps are built around it, so your brand value never shifts.
The light side has less room to travel, so the pale steps sit close together while the dark side spreads out. The ramp stays ordered, but the visual spacing reflects where your color already sits.
By eye you tend to keep saturation constant, which makes pale tints look chalky. This scale desaturates the light steps and slightly saturates the dark ones, which is what keeps the family coherent.
No. Entering a color and copying values is free and needs no sign-in. An account is only needed to save work or generate a full system in Tokara.
Open the scale in Tokara to add semantic colors, surfaces, borders and interaction states around your base color.
Build the full system in Tokara