Color Shades Generator

Color Shades & Tints Generator

Generate complete color scales with shades, tints, and tones of any color. Perfect for creating design systems, UI component libraries, and ensuring consistent color usage across your projects.

What Are Shades, Tints, and Tones?

• Shades - Created by adding black to a pure hue, making it darker
• Tints - Created by adding white to a pure hue, making it lighter
• Tones - Created by adding gray to a pure hue, making it more muted

Features

• Generate 9-11 shade variations from lightest to darkest
• Create tint and tone variations
• Preview colors on UI components
• Export as CSS variables, SCSS variables, or Tailwind config
• Copy individual shades or entire scales
• Named color scales (e.g., primary-50, primary-100, primary-900)
• WCAG contrast ratio checker for each shade

Use Cases

• Design Systems - Create consistent color scales for your design system
• Tailwind CSS - Generate custom color scales for Tailwind configuration
• Material Design - Create Material Design-style color palettes
• UI Components - Define hover states, active states, and disabled states
• Accessibility - Ensure sufficient contrast ratios across all shades
• Data Visualization - Create sequential color scales for charts and graphs

Color Scale Naming

Standard naming convention (inspired by Tailwind CSS):

• 50 - Lightest shade (almost white)
• 100-400 - Light shades
• 500 - Base color (your input color)
• 600-900 - Dark shades
• 950 - Darkest shade (almost black)

Export Formats

• CSS Variables - For use in modern CSS with var()
• SCSS Variables - For Sass/SCSS projects
• Tailwind Config - Direct integration with Tailwind CSS
• JSON - For programmatic use

All color generation happens instantly in your browser using advanced color algorithms.