Color Shade Generator

Tools & Utilities

Color Shade Generator

Generate professional color scales and shades for your design system. Create complete color palettes like Tailwind CSS from any base color. Uses advanced OKLCH color space for perceptually uniform shades. Export to CSS Variables, Tailwind V3/V4, SCSS, TypeScript, and JSON.

🎨 Professional Scales

Generate 50-950 shades like Tailwind CSS

🔬 OKLCH Color Space

Perceptually uniform color generation

🔄 Multi-Format Support

RGB, RGBA, HSL, OKLCH conversion

📦 Export Options

CSS, Tailwind, SCSS, TypeScript, JSON

Base Color Input

Color Scale Preview

Export Color Scale

About Color Algorithms

🔬 OKLCH (Recommended)

Perceptually uniform color space. Creates the most natural and harmonious color scales. Best for design systems and accessible color palettes.

🌈 HSL

Hue, Saturation, Lightness. Traditional color model that's easy to understand. Good for quick prototypes but less perceptually uniform.

🎨 RGB

Red, Green, Blue. Direct color mixing. Best for specific brand colors but can produce less natural intermediate shades.