Skip to main content
WorkUtilities
← All Tools

Color Palette Generator — Tailwind Scale from Any Hex

Generate a complete Tailwind 50–950 color scale from your brand hex. Copy tailwind.config.js or CSS variables with WCAG contrast badges.

Last updated: June 2026

50#f4f6fb✅ B
100#e7edf9✅ B
200#c3d5f4✅ B
300#97b9f2✅ B
400#5f96f1✅ B
500#4f8ef7✅ B
600#2470ef✅ W
700#155dd6✅ W
800#164eac✅ W
900#153f84✅ W
950#0b1e3c✅ W
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f4f6fb',
          100: '#e7edf9',
          200: '#c3d5f4',
          300: '#97b9f2',
          400: '#5f96f1',
          500: '#4f8ef7',
          600: '#2470ef',
          700: '#155dd6',
          800: '#164eac',
          900: '#153f84',
          950: '#0b1e3c',
        }
      }
    }
  }
}

50–950 scale

Full Tailwind color range

HSL algorithm

Consistent tint & shade

WCAG contrast

White or black text badge

Help Us Improve

Your feedback helps us build better tools.

About Color Palette Generator

Our free Color Palette Generator creates a complete Tailwind CSS 50-950 color scale from any hex input using HSL-based tint and shade generation.

Copy tailwind.config.js or CSS custom properties output. Each shade includes WCAG AA contrast badge showing whether white or black text passes.

No signup, runs entirely in your browser. Designed for developers who need brand colors that work across Tailwind utility classes.

Read the full guide: Color palette generator for Tailwind CSS — hex to full scale

When Should You Use the Color Palette Generator?

Brand colors

Convert a single brand hex into a full design token scale.

Tailwind projects

Generate theme.extend.colors for custom palettes.

CSS variables

Export --color-brand-* variables for any CSS project.

Accessibility

Check which shades work for text on light/dark backgrounds.

Design systems

Create consistent hover, border, and background shades.

Frequently Asked Questions