How are the intermediate shades calculated?

The base color is converted into HSL space, preserving hue and saturation while applying standard lightness anchor curves from 96% down to 9%.

Can I paste the exported object directly into Tailwind CSS?

Yes. The Tailwind export option formats the output ready for direct inclusion under theme.extend.colors.

Does generating color palettes upload my brand assets?

No. All HSL color translations and contrast calculations execute entirely in your local browser.

Free & Private Online Browser Utility

Color Palette Generator From Image Free

Generate complete 11-step color palettes from any base hexadecimal color. The generator computes mathematically balanced lightness steps matching Tailwind CSS numeric conventions (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). It evaluates WCAG text contrast for each shade and exports production tokens in Tailwind config objects, CSS custom properties, and raw JSON formats.

How to use

Step 1: Enter Base Color

Input a hex code or pick a starter tone from trending design palette presets.
Step 2: Inspect Shades & Contrast

Review all 11 lightness steps with white and dark text contrast ratings on each swatch.
Step 3: Export Palette Tokens

Select Tailwind configuration, CSS variables, or JSON format and copy the generated tokens.

Options explained

Tailwind 11-Shade Scale

Generates complete shade steps from 50 (subtle background tint) up to 950 (deep high-contrast border).

When to use: Use when creating custom color extensions in tailwind.config.js.

Format Exporter

Outputs palette swatches as a Tailwind JavaScript object, CSS root custom properties (--color-500), or JSON.

When to use: Use to integrate generated color scales directly into design tokens or frontend build setups.

Contrast Indicator

Evaluates luminance for every individual shade to recommend white or dark text overlays.

When to use: Use to ensure readable badge text, buttons, and alert cards across all lightness tiers.

Worked example

Input: Base hex code #3b82f6 (blue)

Output: Generates 11 shades: 50 (#eff6ff) to 500 (#3b82f6) through 950 (#0a101d)

Lightness distribution calibrated to standard design system lightness scales.

Tips & limits

Shades 50 and 100 are ideal for table row stripes, card backdrops, and active tab highlights.
Shades 500 and 600 provide primary brand emphasis for action buttons and callout headings.
Shades 800 through 950 provide high-contrast text and border treatments in dark mode.

Common problems

Lightest shade (50) lacks visible saturation: Base hues with very low saturation produce neutral tints; increase base color saturation for richer pastels.
Contrast rating warns against white text on mid-tones: Use dark text on shades 50 through 400, and switch to white text on shades 600 through 950.

Frequently Asked Questions (FAQ)

How are the intermediate shades calculated?: The base color is converted into HSL space, preserving hue and saturation while applying standard lightness anchor curves from 96% down to 9%.
Can I paste the exported object directly into Tailwind CSS?: Yes. The Tailwind export option formats the output ready for direct inclusion under theme.extend.colors.
Does generating color palettes upload my brand assets?: No. All HSL color translations and contrast calculations execute entirely in your local browser.

How to use

Step 1: Enter Base Color

Step 2: Inspect Shades & Contrast

Step 3: Export Palette Tokens