Color Palette Generator

Choose Between a Scale and a Harmony

This color palette generator has two distinct jobs. Tailwind 50-950 Shades creates an eleven-step light-to-dark ramp from one base hue. The other modes rotate that base around an HSL color wheel to produce complementary, analogous, split-complementary, triadic, or tetradic relationships. Knowing which problem you are solving prevents a common mistake: using a harmony palette where a UI needs interaction-state shades, or using a shade ramp as though it supplied contrasting categories.

Set the Base Color with the native picker or a three- or six-digit hex string. The text field automatically adds # when omitted. The randomize button chooses a new six-digit color. Then select a scheme and choose HEX, RGB, or HSL under Output Format.

Clicking any generated swatch copies that color in the chosen output format. Separate code panels build CSS custom properties and a Tailwind colors object. Both have copy controls.

Anatomy of the 50-950 Ramp

Shade mode emits labels 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Their HSL lightness values are fixed at 97, 91, 82, 72, 62, 51, 41, 32, 23, 14, and 8 percent. Hue comes from the base color. Saturation is mostly retained, then reduced for the very light and very dark ends with a minimum of 10%.

The base input is therefore an influence, not a swatch guaranteed to reappear byte-for-byte at label 500. The generated 500 color uses 51% lightness even if the original base is much lighter or darker. This behavior makes a broadly structured ramp, but it is not Tailwind’s official palette algorithm and does not reproduce built-in Tailwind colors.

Treat the labels as token positions. A practical UI might use 50 for a tinted surface, 200 for a border, 600 for a default action, 700 for hover, and 950 for high-emphasis text. Those assignments still need contrast tests. Numeric order indicates relative darkness in this generated scale, not guaranteed WCAG compliance.

The CSS export in shade mode names variables like --color-primary-50. The Tailwind export nests values beneath brand:

colors: {
  brand: {
    50: "#...",
    100: "#...",
    ...
  },
}

This is a colors-object fragment, not an entire tailwind.config.js or complete CSS file. Insert it at the location required by the Tailwind version and project configuration. Tailwind v4 projects may prefer CSS theme variables instead of a JavaScript config fragment.

Harmony Modes as Color-Wheel Recipes

Harmony generation retains the base saturation and lightness while changing hue:

Complementary returns the base and hue +180°. It gives maximum wheel separation, useful for an accent against a dominant color. Equal visual weight can feel aggressive; let one color dominate.

Analogous returns hue -30°, the base, and hue +30°. These neighbors often feel cohesive, but similar hues may be poor at distinguishing adjacent chart series.

Split-Complementary combines the base with +150° and +210°. It offers two contrasting directions without relying on one exact opposite.

Triadic uses 0°, +120°, and +240°. It supplies three evenly spaced hue families, not three automatically balanced interface roles.

Tetradic uses quarter turns at 0°, +90°, +180°, and +270°. This implementation is a square harmony rather than every possible “double complementary” rectangle.

For low-saturation base colors, hue rotation may yield colors that still look nearly gray. For black or white, saturation is zero and all harmony swatches can collapse to the same neutral because hue has no visible effect. Increase chroma in a separate editor if a colorful scheme is intended.

Output Formats Affect Copies, Not Tailwind Hex

Selecting HEX, RGB, or HSL changes labels on swatches, values copied by clicking swatches, and values in the CSS custom-properties block. HEX uses lowercase six-digit strings. RGB uses integer rgb() syntax. HSL uses whole-number channels.

The Tailwind config panel always exports lowercase hex regardless of selected output format. This is intentional in the implementation and easy to miss when the page is set to HSL. Review the destination format rather than assuming both code panels match the toggle.

Only one copied-code indicator is shared by the two code blocks, so both copy buttons can briefly appear copied after either is pressed. The clipboard still receives the block whose button was clicked.

A Design-System Exercise

Start with a brand blue such as #2563eb and select shades. Examine 600 or 700 for primary actions and pale steps for selected-row surfaces. Export the CSS properties, rename primary if the system uses another semantic namespace, and test button text against each interactive background.

Next choose Complementary to find a potential opposing accent. Do not merge it directly into the numeric brand ramp; it represents a different hue relationship. Give it a semantic role such as “campaign accent” only after checking how it behaves alongside success, warning, and error colors.

For data visualization, Triadic or Tetradic offers candidate series colors. Check color-vision deficiency simulations and luminance separation, because hue spacing alone does not ensure distinguishability. Patterns, markers, and direct labels remain valuable.

Validation and Fallback Behavior

Valid base input is #rgb or #rrggbb with hexadecimal digits. If text is invalid, the visual generation silently falls back to #3b82f6, while the field continues showing the invalid text. There is no error badge. This prevents broken swatches but creates a verification obligation: if results unexpectedly look blue, correct the base field before exporting.

Alpha hex forms are invalid here. Named colors, RGB functions, HSL functions, and wide-gamut colors are not accepted as base input. Three-digit hex is expanded for calculations.

Generated colors are computed through rounded HSL and hex conversion. They are sRGB-style values and can show perceptually uneven jumps. Very saturated hues may clip differently than a palette built in OKLCH. There are no controls for interpolation space, chroma curves, hue drift, or locking a particular original swatch into the scale.

Review Before Shipping

Palette harmony is not a substitute for semantic design. Assign roles, test real components, and inspect dark mode separately. Check contrast for text, icons, focus rings, and disabled states. Avoid encoding status only by color. Verify the lightest shades on common displays, where near-white distinctions can disappear.

Do not assume the generated 500 is your input, the Tailwind fragment is a complete config, or a complementary color is automatically accessible. Avoid randomize when reproducibility matters unless you immediately record the resulting base. The tool has no saved palettes, history, lock controls, import, or file download.

Version generated tokens like other design-system changes. A new base hue recalculates every shade and every exported value, so replacing a palette can affect borders, focus treatments, charts, and illustrations at once. Review the complete token diff and capture component screenshots instead of approving only the attractive swatch grid. If one generated step already ships publicly, preserve its old value deliberately or document the visual migration.

Color Palette Generator FAQ

Is this the same algorithm Tailwind uses for its default colors?

No. It adopts Tailwind-style labels but generates fixed HSL lightness steps from your hue and saturation.

Why is my base color absent from the shade scale?

Shade mode rebuilds colors at predetermined lightness levels. Unless the base happens to match one generated step after rounding, it will not appear exactly.

What happens with invalid hex input?

Generation falls back silently to #3b82f6. Correct the visible field before copying or exporting.

Can I copy one swatch as RGB?

Yes. Select RGB, then click the swatch. The CSS properties also switch to RGB, while Tailwind config remains hex.

Does the tool calculate contrast ratios?

No. Swatch text color is chosen from a simple luminance estimate for display, not a reported WCAG analysis of your intended foreground/background pairs.

Can it make a monochromatic palette?

Shade mode provides one-hue light and dark variants. There is no separately named monochromatic harmony option with custom saturation controls.

Can I export a complete project configuration?

No. The panels provide reusable fragments. Integrate them into your existing CSS or Tailwind setup and preserve the project’s required structure.