No Login Data Private Local Save

Hex Color Darken/Lighten - Online Shade & Tint Calculator

12
0
0
0
✓ Copied to clipboard

Hex Color Shade & Tint Calculator

Darken or lighten any hex color — generate shades & tints instantly

#
SHADE ← Darker | Lighter → TINT
90% ShadeOriginal90% Tint
Shades (Darken — mix with black)
Original Color
#3B82F6
Click to copy
Tints (Lighten — mix with white)
Custom Percentage Preview
%
Shade
—
Tint
—
Frequently Asked Questions
What is the difference between a shade and a tint?

A shade is created by adding black to a pure color, making it darker. A tint is created by adding white to a pure color, making it lighter. In design, shades create depth and shadows, while tints create highlights and softness.

How do you darken a hex color programmatically?

Convert the hex to RGB, then multiply each channel by (1 - percentage/100) to blend toward black (0,0,0). For example, a 20% shade of #3B82F6 blends 80% of the original with 20% black, resulting in a darker blue.

How do you lighten a hex color?

Convert hex to RGB, then interpolate each channel toward white (255,255,255) using the formula: channel + (255 - channel) × percentage/100. A 30% tint moves the color 30% closer to pure white.

What are shades and tints used for in UI design?

Shades and tints are essential for creating color palettes, hover states, borders, shadows, gradients, and accessible contrast ratios. They help maintain visual hierarchy without introducing new hues.

What's the difference between shade/tint and tone?

A tone is created by adding gray (both black and white) to a color, which reduces its saturation/chroma. Shades darken, tints lighten, and tones mute the color. Our calculator focuses on shades and tints for pure darkening/lightening.

Can I use 3-digit hex codes like #ABC?

Yes! Our tool automatically expands 3-digit hex codes to 6-digit format. For example, #F80 becomes #FF8800. You can type with or without the # prefix.

🔧 Related Tools