Color Picker + Tailwind Generator

Pick Any Color &
Generate Tailwind Scales

An interactive HSL color wheel, browser EyeDropper API, and instant Tailwind CSS custom color scale generation — from shade 50 to 950. Export CSS variables or tailwind.config.js in one click.

Open Color Picker + Tailwind Generator

Tailwind CSS Custom Color Generator

Pick any color on the wheel or paste a HEX value and Free Color Tool instantly generates a complete, Tailwind-compatible color scale from shade 50 to 950 — following the same lightness and saturation curve as the official Tailwind palette.

Full 11-shade scale (50, 100, 200 … 900, 950) generated in real time
Compare side-by-side with the closest official Tailwind color family
Export CSS Variables — one click copies all 11 shades as CSS custom properties named --color-brand-50 through --color-brand-950 to your clipboard
Export tailwind.config.js — one click copies a ready-to-paste theme extend colors block for your Tailwind config
Click any swatch to copy its HEX value instantly

shade-50 shade-100 shade-200 shade-300 shade-400 shade-500 shade-600 shade-700 shade-800 shade-900 shade-950

Ready-to-Use Export Formats

Don't waste time manually writing color tokens. Free Color Tool generates production-ready output in two formats — copy and paste straight into your project.

CSS Variables (Export CSS)

:root {
  --color-brand-50:  #fdf2f8;
  --color-brand-500: #ec4899;
  --color-brand-950: #500724;
}

Tailwind Config (Export Config)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50:  '#fdf2f8',
          500: '#ec4899',
          950: '#500724',
        },
      },
    },
  },
};

Interactive HSL Color Wheel

Click or drag anywhere on the wheel to pick a color. The wheel renders gradients across all 360° of hue with lightness fading from center to edge — giving you full HSL control visually. Every pick instantly updates your custom Tailwind scale.

Full 360° hue selection by position on wheel
Brightness and saturation controlled by distance from center
Touch-friendly — works perfectly on mobile and tablet
HEX input syncs dot position and Tailwind scale in real-time

Browser EyeDropper API

Click the Eyedropper button and pick any color from anywhere on your screen — other browser tabs, your Figma designs, reference images, anything visible. The picked color instantly feeds into the Tailwind CSS scale generator.

Works on Chrome, Edge, and Opera (EyeDropper API supported)
Picks from any pixel on screen — not just the app window
Tailwind scale regenerates instantly from the picked color
Combine with palette slot assignment to build full brand systems

Every Color Format Instantly

The Color Information panel populates instantly as you pick. All nine color models are shown simultaneously. Click any row to copy to clipboard.

HEX RGB HSL CMYK LAB LCH XYZ LUV HWB

Color name detection maps your picked color to the closest named CSS color or Pantone-like name from a curated database of 2000+ color names.

WCAG Contrast Checker

Instantly check if your foreground/background color combination meets WCAG 2.1 accessibility guidelines — essential when building accessible Tailwind UI components with your custom color scale.

Computed contrast ratio (e.g. 4.5:1 minimum for AA)
Live text preview at normal and large sizes
Tints & shades scale — 20 variations from dark to light
Apply any Tailwind shade directly to a palette slot

Generate Your Tailwind Color Scale in Seconds

No login, no install. Pick any color, get a full Tailwind CSS scale with export-ready CSS variables and config — free, forever.

Open Tailwind Color Generator Free

Pick Any Color &Generate Tailwind Scales