Tint, shade, tone

Build useful light, dark, and muted color scales.

Create repeatable color ladders for UI surfaces, hover states, disabled states, charts, badges, and brand-system documentation.

Open tool Browse all tools Read color guides
Color Picker Universal color picker Converter Color converter CSS Colors CSS color syntax Harmonies Color wheel Tints Tint, shade, tone Palette Generator Palette generator Contrast WCAG contrast checker Text Color Accessible text color Gradients Gradient generator

Free color utility

Tints

Inputs update live, exports are copy-ready, and the color math stays deterministic.

Color scale

Tints, shades, and tones

How it fits

Build scales with different mixing models.

Generate simple RGB mixes, HSL lightness scales, or OKLCH perceptual scales for UI states and token ladders.

Scale lengths

Choose 5, 7, 9, or 11 steps depending on how much system depth you need.

Mixing modes

Compare simple mixing against HSL and OKLCH approaches.

Token-ready output

Copy CSS custom properties with consistent tint, shade, and tone naming.