Tint and Shades Generator

Base Color Input

#

HEX:#3498DB

RGB:rgb(52, 152, 219)

HSL:hsl(204, 70%, 53%)

Number of Steps

3 steps15 steps

Tint Range

Light90%White

Shade Range

Dark90%Black

Complete Palette Overview

Click any color to see details and copy values

Tints (Color + White)

Shades (Color + Black)

Export Palette

CSS Variables

:root custom properties

JSON

Structured data format

SCSS Variables

Sass/SCSS format

PNG Image

Visual color palette

About Tints and Shades

Tints: Created by adding white to a pure color
Shades: Created by adding black to a pure color
Tones: Created by adding gray (both black and white)
Hue: The pure color without any additions

Design Applications

UI Components: Consistent color schemes
Branding: Extended brand color palettes
Accessibility: Proper contrast variations
Visual Hierarchy: Subtle color differences

Discover Toolexe, a comprehensive collection of free web tools designed for both regular users and developers. Everything is quick, free, and available for use, including time calculators, smart unit converters, HTML formatters, and useful JSON tools. No restrictions or signup the tools you require, when you need them.

Tools Categories