Generate loads a four-color palette from a collection of 400 hand-picked palettes; it does not compute colors from a color-wheel rule, so every result is a combination someone chose. From there you can copy codes, build tints and shades from the palette, check how it looks with different types of color blindness, and export it as CSS variables, gradient code, PNG, or SVG.
Press G or select Generate for another palette; the same palette never appears twice in a row. The shortcut is ignored while you type in a field or while a dialog or menu is open. Select a color to copy its HEX code, such as #055E68. For RGB or HSL, open the full-screen view: each color there has Copy HEX, Copy RGB, and Copy HSL, and Escape closes the view.
Palettes can be passed in the address: /color-palette-generator?palette=343434-055e68-62a388-b9d2d2 opens the generator with those colors and scrolls to it. The parameter accepts up to ten 3- or 6-digit HEX values separated by hyphens, and invalid values are skipped. Generate does not change the address, so to share a palette, build this link from its codes. The variations view and the image picker use the same format when they send a palette here.
The rainbow button opens a table of 19 rows. The Base row is the palette itself; the nine rows above mix each color with white, from 10% to 90%, and the nine rows below mix it with black in the same steps. Select a cell to copy its HEX code, or select a row's label to load that whole row as the current palette.
This is the quickest way to get a pale background or a darker hover color that clearly belongs to the palette. The mix is done in RGB, so mixing a saturated color with black tends to look muddy in the middle rows and mixing it with white looks slightly chalky. If a shade looks dull, take a row closer to Base rather than going further.
Export has four tabs. CSS defines one custom property per color on :root, numbered in palette order. Gradient builds a linear gradient (to right, to left, to bottom, or to top) or a circular radial gradient from all colors, both as a CSS background declaration and as Tailwind classes. With two or three colors and a linear direction, the Tailwind version uses bg-linear-to-r with from-, via-, and to- stops; with four colors or a radial gradient it uses an arbitrary value, so the classes match the CSS exactly. The same tab has a mesh gradient: one radial gradient per color at a random position over the first color. Image downloads palette.png and SVG downloads palette.svg, both 1600 × 1200 with one vertical stripe per color and an option to print the HEX codes on them.
The numbered names are a neutral starting point. Rename them to roles before they spread through a codebase, so a later palette change means editing one line rather than searching for --color-3.
/* Copied from the CSS tab */
:root {
--color-1: #343434;
--color-2: #055e68;
--color-3: #62a388;
--color-4: #b9d2d2;
}
/* Give them roles in your own code */
:root {
--ink: var(--color-1);
--brand: var(--color-2);
--decor: var(--color-3);
--surface: var(--color-4);
}A palette that looks good as stripes can still fail as text. WCAG 2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or about 18.7px bold) and for UI parts such as input borders and icons. Taking the palette above as an example, with ratios computed from the HEX values:
The glasses menu re-renders the palette as it might appear with protanomaly, protanopia, deuteranomaly, deuteranopia, tritanomaly, tritanopia, achromatomaly, or achromatopsia. The simulation only changes what is shown; copied codes and exports always use the original colors. Use it when colors carry meaning, such as chart series or success and error states: if two swatches become hard to tell apart under the red-green types (the protan and deutan rows), which are the most common, add a label, icon, or pattern as well, because WCAG 1.4.1 does not allow color to be the only way information is conveyed.
The black or white label that appears when you hover a swatch is picked by a simple brightness formula, not by a contrast calculation, so treat it as a readability hint rather than a pass.
Visualize opens the palette on a sample website in the palette visualizer, in a new tab. There the first three colors become the primary, secondary, and accent colors of a sample website, and you can edit each role and export a theme for Tailwind, shadcn/ui, Bootstrap, and other libraries. The image button opens Colors from an image, which extracts a palette from an upload or an Unsplash photo without leaving the page. The collection below the generator can be filtered by color: choosing one shows palettes with at least one color within 50 steps of it on each RGB channel.
Updated