Hex color palette generator
Generate a clean hex palette, grab the codes, and drop them straight into your CSS.
Open the palette generator →Built for developers
Every swatch gives you hex, RGB and HSL with one click. Export the whole palette as CSS custom properties (--color-1 … --color-5) or JSON, ready to paste into a stylesheet or design token file.
Fast by keyboard
Press spacebar to reroll, lock the ones you want to keep, and the rest reshuffle. The palette is encoded in the URL as you go, so the link is always a shareable snapshot.
The keyboard-first workflow
Drag any swatch to reorder the palette, click directly on a hex value to type an exact color, and lock (🔒) any swatch you want to keep before rerolling the rest with spacebar — the locked ones stay put while everything else reshuffles within the current harmony mode.
Exporting for real projects
The export menu covers three formats: PNG, a swatch strip image useful for sharing in a deck or chat; CSS, a ready :root { --color-1: #...; } block you can paste straight into a stylesheet; and JSON, an array of hex values for design tokens or a build pipeline. Large PNG export at higher resolution is a Pro feature; the standard PNG, CSS and JSON exports are free.
Sharing a palette
Every palette's colors and lock state are encoded directly into the URL, so any share link is a self-contained snapshot — open it on another device or send it to a teammate and they see exactly the palette you were looking at, no account or save required. Saving a palette to your account, for a public /p/{slug} page, is separate and limited to 3 on a free account, unlimited on Pro.
A typical workflow
Hit spacebar a few times until two or three colors feel right, lock them, then keep rerolling the rest. Click into any swatch to nudge a hex value by hand — useful when a color is close but needs to match an existing brand shade exactly. Once it's settled, copy the CSS export straight into your stylesheet's :root block, or save it if you want a permanent, shareable reference page for later.
Why start from hex specifically
Hex is the format most design tools, brand guidelines and CSS snippets already use, so building a palette in hex means whatever you generate drops straight into an existing project with zero conversion. If you need to tweak a color's lightness or saturation programmatically afterward, every swatch's RGB and HSL equivalents are one click away — you're never locked into a single notation.
FAQ
Can I export CSS variables?
Yes — the export menu produces a ready-to-use :root block of CSS custom properties.
Does the share link include my colors?
Yes. The colors (and which are locked) are encoded in the URL, so opening it anywhere restores the palette.
Is there a limit to how many palettes I can save?
Free accounts can save 3 palettes with public share pages; GenHub Pro removes that limit.
What's the difference between the share link and saving a palette?
The share link works instantly for anyone with the URL and needs no account. Saving creates a persistent public page at a short slug and requires signing in.
Can I reorder the colors after generating them?
Yes — drag any swatch to a new position; the palette (and its URL encoding) updates to the new order.