Tints
Base color mixed toward white.
One color, three useful families
Tints & Shades Generator
Build predictable tints, shades, and tones from a single color. Adjust the number of steps, compare the families side by side, copy any HEX value, and export the whole set as CSS variables.
Deterministic sRGB mixing
The same base color and step count always produce the same output. Tints mix toward white, shades toward black, and tones toward neutral gray.
Live comparison
Base → tint, shade, tone
Select any swatch to copy its HEX value.
Base#3A86FF
Shades
Base color mixed toward black.
Tones
Base color mixed toward neutral gray.
Production handoff
CSS variables
Variable 1 is closest to the base; the highest number is the strongest tint, shade, or tone.
White lightens without changing the source hue directly
A tint is a color mixed with white. In interface work, tints are often useful for selected-row backgrounds, subtle badges, quiet status surfaces, hover fills, and pale brand accents.
Very light tints are not automatically suitable behind text. Check the actual foreground/background contrast whenever readable content sits on top.
Black creates darker variants for depth and emphasis
A shade is a color mixed with black. Shades can support pressed states, dark borders, strong headings, dark-mode accents, or richer brand variants when the base color is too bright.
Adding black also reduces apparent colorfulness. If you need a perceptually controlled design-system ramp, compare this result with the OKLCH Color Scale Generator.
Neutral gray softens intensity
A tone is produced by mixing a color with gray. Colorrow uses midpoint sRGB gray (#808080) as a fixed digital target so the result is deterministic and easy to reproduce.
Tones are useful when a brand color feels too loud for secondary UI, charts, illustrations, supporting borders, or less-prominent states.
Each family uses an explicit sRGB mix
The generator interpolates the red, green, and blue channels of the base color toward a fixed target. The selected step count divides each family’s maximum mix percentage evenly, so changing from five to six steps changes the spacing but never introduces randomness.
This is a practical digital mixing model, not a simulation of physical paint or pigment. Different color spaces can produce different intermediate colors.
Give variants specific jobs
A useful family is more than a row of nearby colors. Assign deliberate roles: a light tint for subtle surfaces, the base for primary actions, a dark shade for emphasis, and a muted tone for supporting elements. Avoid using every generated color just because it exists.
For a larger system, move the chosen colors into semantic design tokens and test the text combinations that will actually appear in the interface.