Free Color Palette Generator

Worked example

Open the page and the "Base color" box already holds #14b8a6, with "Brand palette" selected. Seven swatches appear under "Brand palette · 7 colors": #14B8A6 (Base), #EE66BA (Accent), #E5FAF8 (Light tint), #14524A (Dark shade) and three neutrals tinted with the same hue, #F3F6F6, #63837F and #1A2322. The Base card reads "On white 2.5" with "Fail", and "On black 8.4" with "AAA". Press "Complementary" and the strip drops to two colours, #14B8A6 and #EF7381. Under "Copy format" choose RGB, then press "Copy all". A toast says "Copied 2 colors" and the clipboard holds rgb(20, 184, 166), rgb(239, 115, 129). In "Text and background check" the text colour starts as #000000 on the #14B8A6 background and reads 8.44:1, "Normal text AAA", "Large text AAA".

Which settings to use, and the limits

• Type the colour in whatever form you have it. The "Base color" box takes a hex code with or without the #, in 3 or 6 digits, a CSS name such as teal or tomato, an rgb() or hsl() value (any alpha is ignored), or bare numbers like 20 184 166. Spaces in names are ignored, so "rebecca purple" works. A full 6-digit hex applies as you type. Anything else applies when you press Enter or leave the box. Hex with 8 digits and oklch() are not read. The round dots set one of eight starting colours, and the square opens your system colour chooser.
• Pick the palette type for the job. "Brand palette" gives 7 colours with roles: Base, Accent, Light tint, Dark shade and three neutrals. "Complementary" gives 2, "Analogous" 4, "Triadic" 3, "Split-Complementary" 3, "Tetradic" 4, "Monochromatic" 5 and "Shades" 7. Monochromatic keeps your colour and steps the lightness. Shades is a fixed ladder from 10 to 90 percent lightness at your hue and saturation, and it does not include your exact colour. The types that turn the hue (Complementary, Analogous, Triadic, Split-Complementary, Tetradic) aim for a similar perceived lightness, kept in a mid range.
• Lock what you like, then reshuffle. Press "Lock this color" on a swatch, then press "Shuffle" or choose a new base. Locked swatches keep their colour and the rest change. "Shuffle" picks a random base with HSL saturation 50 to 84 and lightness 40 to 57, so it lands on mid tones. Locks follow the swatch position, not the colour: lock swatch 1, change the base, and swatch 1 keeps the old colour. "Edit this color" opens a colour chooser for one swatch and adds "(edited)" to the header. An edited swatch you did not lock is replaced the next time the palette regenerates.
• Check contrast before you ship. Each card shows "On white" and "On black" ratios with a badge: "AAA" from 7:1, "AA" from 4.5:1, "AA large" from 3:1, otherwise "Fail". The ratios use the WCAG relative-luminance formula. In "Text and background check" you choose a text colour and a background from the palette plus white and black. The "Normal text" line grades AAA at 7 and AA at 4.5. The "Large text" line grades AAA at 4.5 and AA at 3. Test the exact pairs you plan to use, because a palette is not readable merely because each colour is.
• Choose the copy format, then the export. "Copy format" sets what a click on a swatch, a tint or shade chip, and "Copy all" copy: hex, rgb, hsl or oklch. For the base that reads #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) and oklch(70.4% 0.123 182.5). Under "Export:" the buttons save palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js ("Tailwind 50-950"), palette.json, palette.png, palette.svg, palette.gpl, palette.ase and palette.aco. Text files hold hex values, and JSON adds rgb, hsl and oklch strings. PNG is 200 px wide per swatch, SVG 160 px. "Hex labels on PNG/SVG" is ticked by default.
• Share the link, or start from a preset. "Share result" builds a link that keeps the base colour, type, edits and locks after the # in the address; on a touch device that supports it, it opens the share sheet. A shared palette can hold 1 to 12 colours. Under "Try these", "Pastel", "Earthy", "Neon" and "Brand-safe (AA)" each load 5 colours as a "Custom" palette, and changing the base afterwards switches back to "Brand palette". "Pick from screen" appears only in browsers that have the EyeDropper feature, mainly Chromium-based ones.

Common problems and how to fix them

It says "Not a color we recognize. Try #14b8a6, teal or rgb(20, 184, 166)."

The text could not be read as a colour, and the box goes back to the current base. Common causes are hex with 4 or 8 digits such as #14b8a680, an oklch() value, a colour name that is not a CSS name, and numbers out of range such as rgb(300, 0, 0) or hsl(10, 120%, 50%). Retype it as 3 or 6 digit hex, a CSS name, or rgb() or hsl() with values in range, then press Enter.

You picked a new base colour, but one swatch kept the old colour.

That swatch is locked. The lock button on the card turns teal, and its tooltip reads "Unlock this color". Locked swatches are kept whenever the palette regenerates, including after a new base, a new type or "Shuffle". Press the lock again to release it. Locks are tied to the swatch position, so a lock on swatch 1 still holds after you switch from "Brand palette" to "Triadic".

A toast says "Could not copy".

Both clipboard routes failed: the browser's clipboard API, then a hidden text box with a copy command. The clipboard API is missing on pages that are not secure and in some sandboxed frames, and a browser can also refuse it when the page is not in focus. Click once on the page and try again, or open the page in a normal browser tab. If copying stays blocked, use the CSS, JSON or Tailwind export buttons to save a file instead.

There is no "Pick from screen" button.

The button is added only when the browser has the EyeDropper feature, and the page's FAQ says that is mainly Chromium-based browsers. Where it is missing, use the square colour box next to the text field, or type the hex code you read off another app. Pressing Esc during a pick cancels it quietly, and a pick that fails for another reason shows no message on the page.

The saved PNG or SVG has no hex codes on the swatches.

The "Hex labels on PNG/SVG" box is unticked. It is ticked when the page opens, so someone cleared it. With it ticked, each swatch carries its hex code in capitals, in a dark or light ink chosen for contrast. The box affects only the PNG and SVG files. The other exports hold the colour values themselves and have no labels. Tick the box, then press PNG or SVG again.

How it compares

This page builds a palette from one colour with fixed colour-wheel rules, grades contrast with WCAG ratios, and exports to code and design files. It does not pull colours from a photo (the page links to the image colour extractor for that), preview colour blindness, name colours, or keep palettes in an account. Your work is kept in the address bar after the #, so a reload or a bookmark brings it back. Harmony rules give a starting point, not a finished brand. A design app or a brand guide is still the place to decide roles and test the palette on real layouts.