Home/Color & Design
🌗

Color Shades & Tints

Generate shades and tints of a color. This tool runs 100% locally in your browser.

Advertisement
Ad Slot: tool-top

Shades & Tints

Generate systematic variations of any color.

COPY
Tint 90%
#eff0fe
COPY
Tint 80%
#e0e0fc
COPY
Tint 70%
#d0d1fb
COPY
Tint 60%
#c1c2f9
COPY
Tint 50%
#b1b3f8
COPY
Tint 40%
#a1a3f7
COPY
Tint 30%
#9294f5
COPY
Tint 20%
#8285f4
COPY
Tint 10%
#7375f2
COPY
Base
#6366f1
COPY
Shade 10%
#595cd9
COPY
Shade 20%
#4f52c1
COPY
Shade 30%
#4547a9
COPY
Shade 40%
#3b3d91
COPY
Shade 50%
#323379
COPY
Shade 60%
#282960
COPY
Shade 70%
#1e1f48
COPY
Shade 80%
#141430
COPY
Shade 90%
#0a0a18
Advertisement
Ad Slot: tool-bottom

What is Color Shades & Tints?

Generate a monochromatic scale from any base color. Get brighter Tints (mixed with white) and darker Shades (mixed with black). Essential for building consistent UI color systems.

When to Use This Tool

  • 1Creating button hover states
  • 2Designing depth in UI
  • 3Building a design system

Examples

Input
Base: #FF0000
Result
Tint: #FFCCCC, Shade: #CC0000

Frequently Asked Questions

What is the difference?

Tint is color + white (lighter). Shade is color + black (darker). Tone is color + gray.

Privacy & Security

Privacy is our priority. Unlike many other online tools, ToolsHub doesn't upload your data to any server. Whether you're processing sensitive text, calculating financial data, or generating passwords, everything stays in your browser.