What's the difference between a tint and a shade?

A tint is the color mixed with white (lighter); a shade is the color mixed with black (darker). Together they form a value scale of one hue.

How do I lighten or darken a hex color?

Enter the hex code and set the number of steps — the tool mixes it toward white for lighter shades and toward black for darker ones, giving a copy-ready hex for each.

How is this different from an HSL lightness sweep?

This mixes in RGB toward white/black, which naturally desaturates at the extremes — the classic 'tints & shades' look rather than a pure lightness change.

Can I copy each color?

Yes. Every tint and shade shows a hex code ready to copy straight into your CSS or design tool.

Tints & Shades Generator

Lighten and darken any color into a full range — in your browser.

Base color

Steps each side — 5

About Tints & Shades

A tints-and-shades generator creates lighter and darker variations of one color. Enter a hex color and get a range of tints (mixed toward white) and shades (mixed toward black), each with a hex code to copy — perfect for building UI states and color value scales.

Frequently asked questions

What's the difference between a tint and a shade?: A tint is the color mixed with white (lighter); a shade is the color mixed with black (darker). Together they form a value scale of one hue.
How do I lighten or darken a hex color?: Enter the hex code and set the number of steps — the tool mixes it toward white for lighter shades and toward black for darker ones, giving a copy-ready hex for each.
How is this different from an HSL lightness sweep?: This mixes in RGB toward white/black, which naturally desaturates at the extremes — the classic 'tints & shades' look rather than a pure lightness change.
Can I copy each color?: Yes. Every tint and shade shows a hex code ready to copy straight into your CSS or design tool.

More tools

All Design & Color

Unit Converter AWG to mm² NetToolkit Click Counter Click Test Typing Speed Test Reaction Time Test Keyboard Tester Dead Pixel Test Mic Test Webcam Test Password Generator Password Strength Checker ID Generator Stopwatch Timer Countdown to Date Todo List Online Notepad Wheel Spinner Random Number Generator Coin Flip Dice Roller Word Counter JSON Formatter JSON Visualizer CSV to JSON YAML to JSON SQL Formatter Cron Expression Generator Chmod Calculator QR Code Generator Barcode Generator Percentage Calculator GPA Calculator Grade Calculator Scientific Calculator Age Calculator Roman Numeral Converter Base64 Encode / Decode Number Base Converter Text to Binary Morse Code Translator Symbols & Emoji Case Converter Text to Speech Text Repeater Fancy Text Generator Hash Generator URL Encode / Decode Unix Timestamp Converter Time Zone Converter Color Picker Color Converter Lorem Ipsum Generator BMI Calculator BMR & Calorie Calculator Tip Calculator JWT Decoder JWT Encoder Regex Tester UTM Builder SERP Simulator Open Graph Generator Dynamic QR Code Generator Slugify Text Diff Remove Duplicate Lines Discount Calculator Sales Tax Calculator Loan Calculator Compound Interest Calculator Mortgage Calculator Time Duration Calculator Contrast Checker Gradient Generator Box Shadow Generator Border Radius Generator Flexbox & Grid Generator Palette Generator Image to Base64 Aspect Ratio Calculator Image Resizer HEIC to JPG AVIF to JPG AVIF to PNG Favicon Generator Invoice Generator PDF Tools Rotate PDF Delete PDF Pages Reorder PDF Pages Add Page Numbers Watermark PDF PDF to JPG PDF to Text