Design layer· 21 palettes as of 26 Sept 2026
The best color palettes, ready to build with.
Browsing by color was part of CSS Crème from the start. Here's the 2026 version: each palette is a design-system starter, not just swatches. Copy the colors as HEX, RGB, HSL or OKLCH, grab the CSS variables and Tailwind config, and see the font pairing and spacing that go with them. Chasing one specific shade? Browse every CSS named color for its HEX, RGB, HSL, contrast and harmonies.
Aurora
darkCyberpunk Neon
darkDeep Ocean
darkPorcelain
lightCrème
lightRetro Sunset
lightForest Floor
lightPastel Pop
lightStrawberry Matcha
lightMono Slate
lightGolden Hour
darkNeo Brutalist
lightClay
lightAmber Minimal
lightGraphite
lightEmerald SaaS
darkViolet Night
darkNordic
lightBubblegum
lightAzure
lightNo palettes with that tag yet.
None of these quite it?
Start from one colour and get a nine-stop ramp of tints and shades, the same six roles these palettes use, or pull a scheme straight out of an image. Runs in your browser.
Why these are more than swatches
Most palette sites hand you six hex codes and wish you luck. The hard part of using color isn't picking it, it's wiring it into a system: which color is the page background, which is a card, which carries a button, and how text stays readable on each. Every palette here assigns those roles up front, then generates the CSS variables and Tailwind config so you can paste a working theme straight into a project.
Every palette page also prints every pair measured: each of the four inks painted on each of the four grounds, with the real WCAG 2.1 ratio and a verdict on each, failures included. A palette that hides its failing pairs is less useful than one that tells you which two colours never to put together.
Open any palette to copy it in the format you actually use, or start from scratch in the palette generator (ramps, roles, and extraction from an image). Then pair it with a template, build a background in the gradient generator, or test any two colours in the contrast checker.