Color Shades Generator

Generate tints and shades from any base color. Create a full color palette with CSS variables ready to copy.

7,200 AI Tokens Used

Feb 2, 2026 Created

designcolor

Color Palette

#e7effe95%

#b6d0fc85%

#85b1f975%

#5492f765%

#2473f555%

#0a5adb45%

#0846ab35%

#06327a25%

#031e4915%

#010a185%

Tints (Lighter)

Base

#629bf8

#89b4fa

#b1cdfb

#d8e6fd

#ffffff

Shades (Darker)

Base

#0b5fe9

#0847af

#053075

#03183a

#000000

CSS Variables

--color-100: #e7effe;
--color-200: #b6d0fc;
--color-300: #85b1f9;
--color-400: #5492f7;
--color-500: #2473f5;
--color-600: #0a5adb;
--color-700: #0846ab;
--color-800: #06327a;
--color-900: #031e49;
--color-1000: #010a18;

Click any color swatch to copy its hex value. Tints are created by increasing lightness, while shades are created by decreasing lightness in the HSL color space.

How This Tool Was Built

This tool was created entirely by AI. Here's the exact prompt used to generate it:

Prompt Used

Create a Color Shades Generator tool with these features:

1. Color picker and hex input for base color
2. Show HSL values
3. Slider for number of shades (5-15)
4. Generate full palette from light to dark
5. Separate tints (lighter) and shades (darker) sections
6. Click any swatch to copy hex value
7. Copy all as CSS variables button
8. CSS variables output display

Make it colorful with purple as the accent color.

Claude AI Model

7,200 Tokens Used

100%