Color Shade Generator

Create a full color palette with tints, shades, and WCAG contrast scores

Color Shade Generator

Base Color

HEX

RGB

HSL

Generated Palette Click to copy

Preview

Export

100% client-side. Your colors never leave your browser.

Usage Examples

Lighter tints (50-200) work best for backgrounds and subtle highlights.

Mid shades (400-600) are ideal for buttons, links, and primary elements.

Darker shades (700-900) are perfect for headings and high-contrast text.

Always check WCAG contrast — AA requires 4.5:1 for normal text.

Contrast

WCAG contrast requirements

AA: 4.5:1 (Normal text)
AA Large: 3:1 (Large text)
AAA: 7:1 (Normal text)

Features

Full 50-900 Palette

Generate a complete Tailwind-style palette from any base color

WCAG Contrast

Every shade shows contrast scores against white and black backgrounds

Multiple Export Formats

Copy as CSS variables, SCSS, Tailwind config, or JSON

Private & Offline

Runs entirely in your browser, no data sent to any server

How to Use

Pick a Base Color

Choose a color using the picker or enter a HEX, RGB, or HSL value.

Review the Palette

See the generated shades with WCAG contrast indicators for accessibility.

Export or Copy

Copy individual colors or export the full palette as CSS, SCSS, Tailwind, or JSON.

Frequently Asked Questions

The tool converts your base color to HSL and adjusts the Lightness value to create 10 evenly distributed stops. Stop 50 is the lightest (high lightness, near white), and stop 900 is the darkest (low lightness, near black). The scale closely matches the Tailwind CSS color palette approach, where stop 500 is typically close to your original base color.

Each shade shows its contrast ratio against white and against black. These let you quickly choose accessible text and background pairings. For WCAG AA compliance, normal text needs at least 4.5:1, large text needs 3:1. For AAA: 7:1 for normal text, 4.5:1 for large. Light shades (50-300) usually pass AA against black text; dark shades (700-900) usually pass AA against white text.

Click Export Tailwind Config and copy the JavaScript object. Paste it into the "colors" section of your tailwind.config.js file. Example: extend: { colors: { brand: { 50: '#f0f9ff', ..., 900: '#0c4a6e' } } }. Tailwind will then generate utility classes like bg-brand-500, text-brand-700, border-brand-200 automatically.

Click Export CSS Variables to copy CSS custom property declarations. Example output: --color-50: #f0f9ff; --color-500: #0ea5e9; --color-900: #0c4a6e; Paste these into your :root block in CSS. Reference them anywhere with var(--color-500). This is framework-agnostic and works with any CSS setup.

A tint is a lighter version of a color — created by mixing with white (increasing HSL Lightness). A shade is a darker version — created by mixing with black (decreasing Lightness). The palette scale from 50 to 900 includes both: stops 50-400 are tints (lighter than the base), stops 600-900 are shades (darker than the base), and stop 500 approximates the original color.

WCAG contrast requirements explain this: light background + dark text gives high contrast (readable). Stop 50 or 100 backgrounds paired with stop 700-900 text typically meets WCAG AA easily. Conversely, dark backgrounds (800-900) with white or stop 50-100 text also work well. Mid-range shades (400-600) often fail contrast when combined with each other.

Yes. Enter any valid HEX, RGB, or HSL color. The generator creates a full custom palette from your exact base color, not just the predefined Tailwind palette. This is useful for brand colors that are not in the default Tailwind palette — you get the same scale structure but centered on your specific color.

No. All color calculations run locally in your browser via JavaScript. Nothing is transmitted anywhere.

What is a Color Shade Generator?

A Color Shade Generator creates a full range of tints and shades from a single base color. Instead of guessing which lighter or darker variation to use, you get a consistent palette that works across buttons, backgrounds, borders, and text. This tool produces a 10-step scale from 50 (lightest) to 900 (darkest), matching the popular Tailwind CSS color system.

How It Works

The generator converts your base color to HSL and adjusts the lightness value to create 10 evenly distributed stops. Each shade is then evaluated against white and black backgrounds using the WCAG 2.1 contrast formula, so you immediately know which colors are accessible for text. Everything runs in your browser with no server round-trips.

Common Use Cases

Designers use shade generators to build brand palettes, create design tokens, and maintain visual consistency across a product. Developers love them for generating Tailwind config entries or CSS custom properties. They are also essential for accessibility audits, helping you pick text and background pairs that meet WCAG AA or AAA requirements.

Privacy and Security

This Color Shade Generator is 100% client-side. All color calculations happen in your browser using JavaScript. No colors, palettes, or exports are sent to any server. No cookies track your choices, and nothing is stored beyond your current session. Safe to use for confidential brand work and internal design systems.

Security and Privacy

Your data security is our priority

Local Processing

All processing happens in your browser

No Data Transfer

Your data is not sent to our servers

No Data Storage

No data is stored or shared

SSL Encryption

SSL encryption for secure connection

Was this tool useful?

Color Shade Generator