Color Palette Generator — Free Online Tool

A color palette generator turns a single base color into production-ready palettes (complementary, analogous, triadic, split-complementary) you can paste straight into CSS or JSON. SWEDevTools: Prism generates palettes using OKLCH hue rotation for more perceptually even steps than naive HSL shifting, and supports output as hex lists, CSS variables, or structured JSON — all locally in your browser.

Features

• OKLCH-based palette generation: Uses OKLCH hue rotation to keep perceived lightness more consistent than simple HSL rotations.
• Multiple palette strategies: Generate complementary, analogous, triadic, and split-complementary schemes from one base color.
• Dev-friendly outputs: Output as hex values, CSS variables, or JSON suitable for design-token pipelines.
• Private by default: Runs locally in the browser so brand colors and client work never leave your machine.

Frequently Asked Questions

What color formats can I paste in?

You can paste common CSS color formats like #RRGGBB hex, rgb(), hsl(), and many named CSS colors. The tool uses the first line as the base color.

What palette types does it generate?

Complementary, analogous, triadic, and split-complementary. You can generate a single type or all of them together.

Can I export CSS variables for theming?

Yes. Choose the CSS variables output to generate a :root block you can paste into your app and map to tokens like --color-base and --color-analogous-1.

Does this check WCAG contrast automatically?

Not currently. For accessibility, pair the generated palette with a contrast checker and validate key foreground/background combinations (for example, text on primary).

Is OKLCH better than HSL for palettes?

Often, yes for UI work — OKLCH is designed to be perceptually uniform, so hue rotations tend to produce more consistent-looking steps than simple HSL shifts.

Can I generate tokens for a design system?

Use the JSON output and then map it into your token format (Style Dictionary, Tailwind theme colors, CSS variables, or a custom build step).

Will it work with multiple input lines?

This tool generates a palette from the first line only. If you have multiple brand colors, run it once per base color and keep the outputs in your tokens repo.

Do you upload my colors anywhere?

No. The generator runs entirely in your browser for privacy and speed.

What happened to smalldev.tools?

smalldev.tools is no longer available. Prism by SWEDevTools offers the same developer tools and more, with offline support, pipeline chaining, and completely free usage — no signup required.

Is Prism a good alternative to coolors.co for color tools?

Yes. Prism converts colors and generates palettes entirely offline in your browser. No signup, no ads, and you can chain color tools with other Prism utilities in pipelines.