Can I generate a Tailwind v3 or v4 palette from this tool?

Yes. The Tailwind CSS Config output uses the standard colors object format compatible with Tailwind v3 and v4. Replace the placeholder 'brand' key with your actual color name (primary, accent, sky, etc.) and paste the object into your tailwind.config.js or tailwind.config.ts.

How do I find a complementary color?

The complementary color is shown in the Shade Generator panel next to the base color picker. Complementary colors are the hue directly opposite on the color wheel (hue + 180°) — they create maximum contrast and are used for call-to-action buttons against a brand color background.

Design & CSS

Color Palette & Gradient Builder

The problem: Designing a consistent UI color system requires 9 shades per brand color, complementary accents, and gradient combinations — all computed by hand from HSL math.

ASG Privacy VerifiedVerified

100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.

ASG Privacy VerifiedVerified

100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.

#0EA5E9

HSL: 199° 89% 48%

Complementary

#E7520D

9-Step Shade Scale

#032230

#064460

#086591

#0b87c1

#0ea9f1

#3ebaf4

#6ecbf7

#9fddf9

#cfeefc

#032230

#064460

#086591

#0b87c1

#0ea9f1

#3ebaf4

#6ecbf7

#9fddf9

#cfeefc

Tailwind CSS Config

colors: {
  brand: {
    100: "#032230",
    200: "#064460",
    300: "#086591",
    400: "#0b87c1",
    500: "#0ea9f1",
    600: "#3ebaf4",
    700: "#6ecbf7",
    800: "#9fddf9",
    900: "#cfeefc",
  }
}

Color Palette & Gradient Builder: the complete guide

A color palette generator produces systematic, mathematically coherent color scales from a single brand or accent color — the kind of 9-shade Tailwind-compatible palette that design systems require for backgrounds, borders, text, hover states and focus rings. It also builds multi-stop CSS linear gradients with full control over color stops, positions and direction. Both tools are built on HSL math: hue and saturation stay locked to the input color while lightness steps from near-black to near-white across nine evenly spaced steps, producing a scale that reads as obviously related shades of the same color family rather than randomly lightened versions.

HSL math behind systematic shade scales

HSL (Hue, Saturation, Lightness) separates color into three independent axes, making it ideal for generating systematic scales. Given a brand color like #0ea5e9 (HSL 199°, 89%, 49%), a 9-shade scale locks hue and saturation at 199° and 89% and steps lightness from 10% to 90% in equal increments (10, 20, 30, 40, 50, 60, 70, 80, 90). The result is nine colors from near-black to near-white in the sky-blue family — usable as the '50' through '900' scale in Tailwind CSS or the 'lightest' through 'darkest' in a design system. The approach guarantees contrast between steps and ensures that shade 900 is always dark enough for text on a white background and shade 50 is always light enough for a card background.

Gradient builder with multi-stop control

CSS gradients use the linear-gradient() function with direction and color stops. Each stop has a color and a percentage position (0% to 100%) along the gradient axis. Two stops create a simple two-color blend; three or more stops allow complex color transitions, color holds (placing two stops of the same color adjacent creates a hard edge), and non-linear progressions. The builder serializes stops into a CSS linear-gradient string and offers eight direction presets (to right, to bottom, diagonal, specific degree angles). The gradient preview updates live for immediate visual feedback.

Step by step: how to use Color Palette

1
Click the color picker or type a hex value to set your base color.
2
The 9-shade scale appears immediately below — click any swatch to copy its hex value.
3
Copy the Tailwind CSS config snippet to use the palette in your design system.
4
Switch to the Gradient Builder tab to create multi-stop gradients.
5
Add color stops, drag the position sliders, and choose a direction.
6
Copy the CSS background rule for use in your stylesheets.

Security & privacy

All color math (HSL conversion, shade stepping, gradient serialization) runs in local JavaScript with no external dependencies. Your brand colors — which may be confidential before a product launch — never leave your browser.