Color Variations
10 free tools for creating tints, shades and tones of any color. Adjust lightness, saturation and opacity to build complete color scales for design systems.
Shades Generator
Create progressively darker shades of any color. Great for hover states and text.
Open Tool →Tints Generator
Create progressively lighter tints of any color. Perfect for backgrounds and surfaces.
Open Tool →Tones Generator
Create muted tones of any color — the foundation of sophisticated, muted palettes.
Open Tool →Color Variations Guide
All three variations in one view — see tints, base and shades side by side.
Open Tool →Darker Color Generator
Quickly generate darker versions of any color for hover states and borders.
Open Tool →Lighter Color Generator
Generate lighter tints for backgrounds and subtle highlights.
Open Tool →Saturation Tool
Adjust saturation from 0% (gray) to 100% (vivid). Build muted color scales.
Open Tool →Brightness Tool
Adjust brightness to build 50-900 color scales for design systems.
Open Tool →Opacity Tool
Adjust alpha (opacity) from 0% to 100% for overlays and glass effects.
Open Tool →Alpha Generator
Generate RGBA, HSLA and 8-digit HEX from any color and alpha value.
Open Tool →About Color Variations
Every color can be modified in three fundamental ways: add white to create a lighter tint, add black to create a darker shade, or add gray to create a muted tone. These three operations — tints, shades and tones — form the foundation of every design system color scale.
Modern design systems use 50-900 scales where 50 is a very light tint and 900 is a very dark shade. These scales are built entirely from variations of a single base color. OmniColor's variation tools make it easy to generate complete scales from any base color.
When to Use Each Variation
- Shades (darker): Text, hover states, active states, borders, shadows.
- Tints (lighter): Backgrounds, cards, disabled states, subtle highlights.
- Tones (muted): Secondary text, quiet UI, editorial and vintage palettes.
- Saturation: Building tone scales, matching muted design tones.
- Brightness: Building 50-900 scales, dark/light modes.
- Opacity: Overlays, glass effects, transparent UI.