🎨 Color Tints
Base color mixed with white (0% to 100%)
🌑 Color Shades
Base color mixed with black (0% to 100%)
Get started in 4 simple steps
Choose Base Color
Select a custom color using the swatch picker or enter a 6-digit hex code in the text box.
Observe Variations
Review 10 progressive tint steps (lighter shades) and 10 shade steps (darker variations).
Copy Custom Codes
Click any color block inside the grid to copy its HEX value instantly to clipboard.
Export CSS Variables
Open the Export Modal to grab ready-to-use CSS custom properties or raw JSON arrays.
Why use our Tint & Shade Generator?
10-Step Tints Array
Progressively blends white with your base color from 0% (base) to 100% (pure white).
10-Step Shades Array
Progressively blends black with your base color from 0% (base) to 100% (pure black).
CSS/JSON Exporter
Instantly copy formatted CSS variables (`--color-tint-50`) or structured JSON payloads.
100% Privacy Sandbox
Calculates color model mathematics locally. None of your selections or history are uploaded.
Real-Time Rendering
Updates the tints and shades spectrum in real time. Zero server lookup delays.
Query-Synced Share URLs
Saves selected base color hex values inside the address bar queries for sharing.