Guides JP

Color Shades Generator

Pick a base color and instantly generate tints (toward white) and shades (toward black). Click any HEX to copy.

Last updated: 2026/10/16 Design Feedback & bug reports

Click a color to copy its HEX code.

Tints (toward white)

Base Color

Shades (toward black)

How to Use

1

Pick a Base Color

Enter your base color using the color picker or a HEX code.

2

Generate Steps

Lightness steps from tints (toward white) to shades (toward black) are generated automatically.

3

Copy HEX

Click any color to copy its HEX code, or use "Copy All HEX" to grab the whole scale at once.

About Color Shades Generator

A web tool that generates lightness steps from a single base color, producing tints (mixed with white) and shades (mixed with black). It adjusts the HSL lightness evenly while preserving hue and saturation, creating a natural gradient scale. All processing happens entirely in your browser, so your color data is never sent to any server.

Features

  • Automatic Lightness ScaleEvenly adjusts HSL lightness to instantly generate tint and shade steps.
  • One-Click CopyClick any color to copy its HEX code and keep your design work flowing.
  • Adjustable StepsChoose 5 to 10 steps per side to build a color scale that fits your needs.
  • Privacy ProtectedAll processing happens in your browser. Color data is never sent to servers.

Use Cases

  • Building UI color scales (50-900)
  • Defining CSS variables and design tokens
  • Creating hover and active state variations
  • Stepped color palettes for graphs and charts
  • Expanding brand color variations

FAQ

What is the difference between a tint and a shade?
A tint is the original color mixed with white to make it lighter, while a shade is mixed with black to make it darker. In this tool, increasing lightness produces tints and decreasing lightness produces shades.
How are the steps generated?
The base color is converted to HSL (hue, saturation, lightness), then the lightness is adjusted evenly while keeping hue and saturation fixed. This creates a natural gradient without distorting the color.
How can I use the generated HEX codes?
Click any color to copy its HEX code to your clipboard. You can paste it directly into CSS color or background-color values, or into the color fields of your design tools.
Can I use it on my smartphone?
Yes, it works on all devices including smartphones, tablets, and PCs. The color picker uses your device's native interface.
Is my color data saved anywhere?
No, your color data is never sent to or stored on our servers. All calculations happen locally in your browser, so you can use it with peace of mind.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

What Are Shades and Tints? Adding Black or White and Building Them in HSL Learn the difference between shades (a base color mixed with black), tints (mixed with white), and tones (mixed with gray). This beginner-friendly guide covers adjusting lightness and saturation, tips for building beautiful color steps, and how to implement them in HSL.