Tints, Shades & Tones
Enter any color to build 10-step scales toward white (tints), black (shades), and gray (tones). Click a swatch to copy its hex, or export a whole scale as CSS variables.
Tints
Mixed with white — lighter, softer surfaces
Shades
Mixed with black — depth for text and pressed states
Tones
Mixed with gray — muted UI that stays on-hue
Tints, shades, and tones are the three classic ways to vary a single hue. A tint mixes the base color with white, raising lightness and softening saturation. A shade mixes it with black, deepening the color while keeping its chroma character. A tone mixes it with gray, muting the color at a constant lightness.
Designers use these scales constantly: tints for hover states and backgrounds, shades for text and pressed states, tones for muted UI surfaces that should not compete with content. Building all three from one base color keeps a palette cohesive because every step shares the same underlying hue.
Enter any hex value above to generate a 10-step scale in each direction. Click a swatch to copy its hex, or copy an entire scale as ready-to-paste CSS custom properties. For full palette work with harmonies, image extraction, and export formats, open the palette generator.