Choosing and adapting a palette from the library
How the library is organised
Explore is a browsable archive of curated and generated palettes, most of them sized for product UI. You can narrow it by hue (ten families, red through gray), by style tag such as Dark Mode UI, Pastel, Monochromatic, UI System or Tailwind 50-950, and by topic such as Nature, Ocean or Sunset. Two facets help once the list is still long: palette size (from two colors to nine or more) and contrast, a palette-level APCA score shown as Lc and grouped into high, mid and soft. Sorting is Most Popular, Latest or Highest Contrast.
Every palette has its own page with each swatch's HEX, a link to that color's page in the color library, and links that open the swatch on white and on black in the contrast pair pages. Treat tags as a statement of intent, not a guarantee. A set tagged Dark Mode UI still has to pass the checks below before you build on it.
Judge a palette by the jobs its colors can do
Five swatches that look good side by side can still fail as an interface. Assign roles first: a surface (the page and card backgrounds), a text color, and one or two accents. A palette needs at least one very light and one very dark color to cover surface and text, and at least one color with enough chroma to read as an action. If every swatch sits at a similar lightness, there is nothing to build hierarchy from, however pleasant the hues are.
The 60-30-10 rule is a useful starting proportion: roughly 60% neutral surface, 30% secondary color, 10% accent. It is a heuristic for avoiding an interface where everything shouts, not a law, and dense dashboards or editorial layouts often break it on purpose. The practical takeaway is that the most saturated color should be the scarcest one.
Read lightness and chroma across the palette
Paste each swatch into the OKLCH picker or open its color page and write down L (lightness), C (chroma) and H (hue). Lightness in OKLCH tracks perceived brightness far better than HSL, so the L column tells you quickly whether the set has a usable spread, for example from around 0.95 for a surface down to 0.3 or lower for text. As a rough guide, neutrals have very low chroma, while an accent needs noticeably more.
Look for two patterns. Hues that drift without reason (a green that leans yellow next to a blue that leans purple) often mean the set was assembled rather than designed. Neutrals tinted slightly toward the brand hue usually feel more cohesive than pure grays. The OKLCH vs HSL guide explains why these numbers are comparable in a way HSL values are not.
Check the pairs you will actually use
Before committing, list the real combinations: body text on surface, text on a card, the label on a primary button, an accent used as link text, and any outline or focus ring against its background. WCAG 2 asks for 4.5:1 for normal text and 3:1 for large text and interface components. Run each pair through the contrast checker, which also shows APCA Lc. The WCAG vs APCA guide covers when to use which.
The Lc score on the palette is a summary, not proof. A high score means at least two colors are far apart, not that your text color and your surface are. If no pair in the set reaches 4.5:1, it cannot carry body text, and you will need to darken or lighten one swatch yourself.
Adapting a palette to dark mode
Do not just invert. Keep the hues, swap the lightness order so surfaces are dark and text is light, and avoid pure black and pure white at the extremes, which are harsh on large areas. Accents that were fine on a light surface often look too intense on a dark one, so lower their chroma a little and raise their lightness. Then recheck every pair: an accent that passed on white can fail on a dark surface, and the reverse. The dark mode colors guide walks through this in detail.
From five swatches to a 50-950 scale
A five-color palette is a direction, not a design system. Pick the swatch that will be your main brand step (usually around 500 or 600), keep its hue, and let the other steps differ mostly in lightness. The picker lays a color out on 50 to 950 steps and marks the nearest one, which is a quick way to see where it lands. Chroma should taper toward the very light and very dark ends because the sRGB gamut narrows there; the guide to building OKLCH scales and the gamut mapping guide explain why. If you want a set that already comes in ramp form, filter by the Tailwind 50-950 tag.
Exporting, and what the license covers
A palette page shows copyable blocks for CSS custom properties, a Tailwind v4 @theme block and DTCG JSON. The palette panel in the list also downloads PDF, PNG, SVG, CSS and Tailwind files and copies a share link, and Studio exports CSS, Tailwind, DTCG and a React constants file for roles you have adjusted. The color values in these exports are oklch() strings with no sRGB fallback, so if you support browsers without oklch(), add a HEX declaration before it.
Per the site terms, colors and exports you create are yours to use, including commercially. That covers the output files. It does not clear a palette that happens to match another company's brand colors, so check that separately for anything customer-facing. If you want the same data from code, the colour API returns one color at a time.
Meaning, names and alternatives
Color choice is also a communication decision. The color meaning guides, for example red, describe common associations and where they differ between contexts. The color names encyclopedia helps you find a slightly warmer or darker neighbour of a swatch that is almost right. If a palette is not close, generate from a brand HEX in Pairs or pull colors from a photo with Extract. For a comparison with other generators see the comparison hub, including Coolors and Adobe Color.