Getting a Palette Into Figma and Other Design Tools

A palette that lives as loose hex codes in a design file drifts within a week. Someone re-picks a color by eye, someone else copies a fill from an old screen, and soon the file contains four nearly identical pinks. The fix in every serious design tool is the same idea under different names: define each color once as a reusable token, then reference the token everywhere.

Bring colors in as exact hex

Move colors by their hex codes, never by re-picking. Copy each swatch from the generator, or grab the whole set at once, so the values in your design file match the values that will ship in code. A mismatch introduced here is the root of the classic complaint that the design and the build do not match — and it is almost always caused by someone matching a color by eye.

Create styles, not one-off fills

Most tools let you save a color as a named style, swatch or asset. Do this for every color in the palette before you draw anything. Then fill shapes by choosing the style rather than typing a hex. A shape filled with a style updates automatically when the style changes; a shape filled with a raw hex has to be hunted down by hand.

The test of a well-set-up file: change one color style and watch every element using it update at once. If you have to hunt down individual shapes, you were using fills, not styles.

Name by role, not by appearance

Name the styles after the job they do — Primary, Accent, Surface, Ink, Border — rather than after the color. "Plum 600" is fine as a raw palette entry, but a component filled with "Primary" survives a rebrand, while one filled with "Plum 600" quietly becomes a lie the moment the brand color changes to teal. This mirrors the token layering developers use, which makes handoff conversations much shorter.

Use variables for theming

Newer tools add variables — a layer above styles that can hold a different value per mode. This is how you build light and dark from a single file: define a Surface variable that resolves to cream in light mode and ink in dark mode, and every component inherits both themes for free. The concept mirrors CSS custom properties almost exactly, which is precisely why it hands off so cleanly.

Document the pairings

For each background color, record which text color pairs with it safely, verified in the contrast checker, and write it into the style description where anyone can see it. This turns a set of color styles into a small accessibility contract that any designer opening the file can follow without re-deriving the numbers.

Keep a portable source of truth

Design tools come and go, and file formats go with them. Keep the canonical palette somewhere tool-independent — a plain list of named hex codes, or an exported CSS variables block from the generator, stored beside the project. When you switch tools, onboard a contractor, or rebuild a brand kit, that portable list reconstructs the whole system in minutes.

Auditing a file that already drifted

Most teams arrive at this article with an existing file full of loose fills. The recovery is mechanical rather than heroic. Select all, list every unique color the file contains, and sort them: you will typically find your five intended colors plus a dozen near-duplicates that differ by a digit or two. Map each stray value to its nearest intended color, apply the style, and delete the stray. Do it one screen at a time rather than all at once, and finish by locking the palette down as styles so the same drift cannot restart. An hour of this usually removes years of accumulated inconsistency, and it makes the next handoff dramatically shorter.

Our CSS and Tailwind guide shows the developer-facing version of the same source of truth.