Color Variations — Tints, Shades & Tones

Generate lighter, darker and desaturated variations of any color. Perfect for UI components, design systems and brand palettes.

Color Picker

Select or enter a color code

#2596BE

HSL/HSV Square Picker

Variations

Get useful color information like conversion,combinations, blindness simulation and more.

Shades

Darker variations created by adding black to your base color.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#2187AB

#1E7898

#1A6985

#165A72

#134B5F

#0F3C4C

#0B2D39

#071E26

#040F13

#000000

Tints

Lighter variations created by adding white to your base color.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#3BA1C5

#51ABCB

#66B6D2

#7CC0D8

#92CBDF

#A8D5E5

#BEE0EC

#D3EAF2

#E9F5F9

#FFFFFF

Tones

A tone is created by adding gray to a base color, increasing its lightness. Tones looks more sophisticated and complex than base colors.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#2E94B8

#3792B2

#408FAB

#498DA5

#538B9F

#5C8999

#658793

#6E848C

#778286

#808080

Hues

A hue refers to the basic family of a color from red to violet. Hues are variations of a base color on the color wheel.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#26C04F

#26C06E

#26C08C

#26C0AB

#26B5C0

#2697C0

#2678C0

#2659C0

#263AC0

#3026C0

#4F26C0

Temperatures

Color are often divided in cool and warm according to how we perceive them. Greens and blues are cool, whilst reds and yellows are warm.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#97C026

#59C026

#26C030

#26C06E

#26C0AB

#2697C0

#2659C0

#3026C0

#6E26C0

#AB26C0

#C02697

Common Use Cases

• UI component states (hover, active, disabled)• Creating depth with shadows and highlights• Building consistent color systems

Design System Tip

These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.

Conversion

Color Combinations

Contrast Checker

Blindness Simulator

Core Features

Tint, Shade, and Tone Steps
Generate lighter tints, darker shades, and softer tones from one base color.
Side-by-Side Comparison
Compare each variation in one view before using it in a UI, chart, or brand palette.
Live Code Output
See updated HEX, RGB, and HSL values for every generated step.
Design-System Friendly
Build hover states, surface colors, and semantic ramps from the same source color.
One-Click Copy
Copy any variation instantly for CSS, Figma, product design, or documentation.

How To Use

Choose a Base Color — start with a HEX code or pick a color visually.

Review Variation Types — compare tints, shades, and tones generated from the same source.

Select Useful Steps — identify the lighter or darker versions that match your layout or state system.

Copy Color Codes — copy the variation you need for product UI, branding, or illustration.

Find answers to commonly asked questions

What are color variations?

Color variations are adjusted versions of one base color, including lighter tints, darker shades, and softer tones.

What is the difference between tints, shades, and tones?

Tints add white, shades add black, and tones reduce intensity by mixing in gray.

Why use color variations in a design system?

They help you build consistent states such as hover, active, muted, and surface levels from one core brand color.

Can I copy the generated codes?

Yes. Each variation can be copied and reused in CSS, design tools, and product documentation.

Is the variation tool free to use?

Yes. The color variation generator is free and works directly in your browser.