Don't like ads? Go Ad-Free Today 

Color Tint & Shade Generator

ColorDeveloper

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

Color Tint & Shade Generator

Pick a hex or RGB color and instantly get 10 tints (your color blended toward white) and 10 shades (blended toward black) as visual swatches. Click any swatch to copy its hex code, or export the full set as CSS custom properties, SCSS variables, JSON, or a plain hex list.

How to Use

Pick a base color with the color picker, or paste any hex value (3 or 6 digit) into the Hex field.
Optional: change the variable Name (used in the exported CSS/SCSS/JSON keys).
Choose a Mix Method. OKLCH gives the smoothest gradient, HSL is the classic web approach, and RGB is the simplest linear blend.
Choose an Export Format. The export updates live as you change anything.
Click any swatch to copy its hex, or use the Copy / Download buttons on the export code panel.

Features

10 tints + 10 shades – two strips of swatches at 10% increments, from a subtle 10% mix to a near-pure 100% mix.
Three mix methods – OKLCH for perceptually uniform steps, HSL for hue-preserving lightness shifts, or straight RGB.
Click-to-copy swatches – every cell shows its hex and copies to the clipboard with a single click.
Multiple export formats – CSS custom properties, SCSS variables, JSON palette, or a plain readable hex list.
Live preview – every change to the color, name, method, or format re-renders the swatches and code instantly.
Download the export – save the generated palette to a file with the right extension for your format.

 FAQ

What is the difference between a tint and a shade?

A tint is the original color mixed with white, which makes it lighter and softer. A shade is the original color mixed with black, which makes it darker and deeper. Together they form the value range of a single hue.
Why does OKLCH usually look smoother than RGB or HSL?

OKLCH is designed to match how human eyes perceive lightness and chroma, so equal numerical steps look like equal visual steps. RGB and HSL operate in device color space, so the same numerical step can look like a much bigger or smaller jump depending on where you are on the scale.
How are tints and shades different from a color palette?

A palette is a curated set of distinct hues that work together (for example, a primary, an accent, and neutrals). Tints and shades are variations of a single hue along the light-dark axis. UI systems usually combine both: pick a few base hues, then generate tints and shades of each.