Color palettes with hex codes you can actually copy

Thirteen collections, seventy-eight palettes, three hundred and ninety colors. Click any swatch to copy it.

  • Every hex copies in one click

    Click a swatch and the value is on your clipboard. Click the button under a palette and you get the whole thing as CSS custom properties, named and numbered, ready to paste into a stylesheet.

  • Hand-picked, not generated

    A random five colors from a hue range looks like a random five colors. Every palette here was chosen and ordered by hand, dark to light, so a row shows its structure rather than hiding it.

  • Notes you can act on

    Each collection says which hue is doing the work, what the scheme fails at, and what to pair it with. That is the part the listicles leave out, and it is the part that decides whether a palette survives contact with a real page.

  • Nothing is asked of you

    No sign-up, no email gate, no watermark, no export limit. The palettes are in the page markup, so they are there whether or not the script loads and whether or not you are online.

Picking one that survives a real page

A palette that looks good as a row of swatches can still fall apart the moment it has to carry an interface, and it usually fails in one of three ways.

It has no dark anchor. Five mid-tones at similar lightness give you nothing to set type in and nothing to build a header from. Almost every palette here leads with a genuinely dark color for that reason, and if you are assembling your own, that is the one to choose first.

The contrast was never checked. This is the common one. A color that reads as usable on a white artboard is often nowhere near 4.5:1 against it, which is the WCAG AA threshold for body text. Pastels fail this almost universally, summer yellows fail it badly, and mid-tone sage fails it quietly. Take any two colors from a palette and run them through the contrast checker before you commit to them.

It is being asked to do a job it is not for. A neutral palette will not create emphasis, so it needs one saturated accent from outside itself. A jewel-tone winter scheme will not recede, so it cannot also be your background. Each collection says which of these applies to it.

Getting a palette out of something you already have

If the colors are already fixed by a photograph, a logo or a client's brand, start there instead: pull the palette out of the image and it will give you the hex values with each color's share of the frame, which is a better starting point than matching by eye. From there, convert to RGB or HSL if you need the values in another format.

And if none of these is quite right, generate one and lock the colors you like as you go.

Hey there 👋  Friends from designmodo are here to help!