Hex List or Swatches? How to Store a Color Palette

Store a color palette as text first: a list of named colors with their hex values, which pastes straight into CSS, tickets and design tools. Keep the official version in your design tool's library (Figma variables or styles, Adobe Creative Cloud Libraries, or a Canva Brand Kit), and use a swatch image only when people need to see the palette. A picture of swatches can't be pasted as values, searched for a hex code, or compared line by line when a color changes.

Three forms of a palette, three jobs

Each form is generated from the one above it. If a color changes, change the library first, then update the list, then re-export the picture.

How to write a palette list that pastes

Name colors by their role, not their appearance, so the list survives a rebrand:

# Acme product palette
color/bg/page        #F7F5F2
color/bg/elevated    #FFFFFF
color/text/primary   #1A1A1A
color/text/muted     #5C5C5C
color/cta/bg         #0B6E4F
color/cta/text       #FFFFFF
color/border/subtle  #E6E1DA
color/danger         #B42318
color/overlay        #1A1A1A99

A few rules keep it useful:

• One color per line, name first, value second, so a search for either finds the line.
• Use #RRGGBBAA (as in color/overlay above) when a color has transparency.
• Keep light and dark values as two blocks in the same file. How to manage light and dark mode assets in Figma shows the pattern.
• Commit the file next to the code, or paste the block into the design system's documentation page.

Where the official palette should live

Figma. Store colors as variables (or color styles) and publish them in a team library so every file uses the same values. Variables can hold a value per mode, which is how one collection carries both light and dark themes; modes are available on Education, Professional, Organization and Enterprise plans. The eyedropper (I) samples colors inside the file, but sampling outside the Figma window isn't supported in the Windows desktop app or the browser.

Adobe Creative Cloud Libraries. Libraries collect color palettes, character styles, logos and other assets, and you can open them in Photoshop, Illustrator, InDesign and other Adobe apps. A library holds up to 10,000 assets and can be shared with your team. Creative Cloud Libraries or a local clip shelf? compares that with keeping files nearby.

Canva Brand Kit. A Brand Kit holds a team's official logos, colors and fonts. Admins and brand designers create and manage team kits, and admins can let members create a personal one.

Code. For engineering, a tokens file in the repo is the record. The design library should match it.

When a swatch image is the right choice

Make a picture when the audience needs to see color rather than use it: a brand presentation, a stakeholder review, a mood board. Export one labeled strip with the token names printed on it, save it in the brand folder with a clear name such as acme-palette-product.png, and regenerate it when the library changes.

For print, a screen hex is only a reference. Keep the CMYK or spot values your printer specified in the same text file, next to the screen values. Packaging adds a named spot colour for the cut and fold lines; dieline file formats for printers covers what to send.

Copying hex values on Windows

A palette list is a good fit for Windows clipboard history: it's text, so Win+V can keep it, and a pinned item survives a restart. Copy the whole block when you're implementing a full theme, or one line when you need a single token. How to grab a color hex and keep it covers getting a value out of an app in the first place.

If you sample colors from a screenshot rather than the source file, expect small differences from compression and color management; how to pick colors from a copied screenshot explains why and when it's close enough.

Edge Drop recognizes copied color values (hex, rgb() and hsl() text) and lists them under its Colors filter, so the values you copied today sit together; clicking one pastes it into the app you were using.

Check contrast from the list

Contrast is measured between pairs, so write the pairs down: text/primary on bg/page, cta/text on cta/bg. WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text (at least 18 point, or 14 point bold). Check each pair in a contrast tool, and check both themes if you have two.

FAQ

Should I include RGB or HSL as well as hex?

Only if your code uses them. One canonical format per color keeps the list easy to search and diff; tools can convert hex to other formats when needed.

How many colors should a product palette list have?

As many roles as the interface actually uses. If two tokens have the same value and the same job, merge them; if one hex serves two jobs, keep two names so they can change separately later.

Which copy wins if the list and the library disagree?

Whichever source of truth your team agreed on, usually the design library or the tokens file kept in sync with it. Fix that first, then regenerate the list and any swatch images from it, and tell everyone which tokens changed.

Related reading

• How to Copy a Hex Color Code on Windows (and Save It)
• How to Get a Color Code From a Screenshot on Windows
• Creative Cloud Libraries Alternatives for Local Assets
• How to Hand Off Design Assets to Developers (Checklist)

Sources

• Modes for variables (Figma Help) — variables with per-mode values, plan availability.
• Sample colors with the eyedropper tool (Figma Help) — I shortcut, no outside-window sampling on Windows or browser.
• Creative Cloud Libraries overview (Adobe) — asset types, 10,000-asset limit, sharing.
• Set up Brand Kits (Canva Help Center) — logos, colors and fonts; who can create kits.
• Understanding SC 1.4.3 Contrast (Minimum) (W3C) — 4.5:1 and 3:1 ratios, large text definition.
• Using the clipboard (Microsoft Support) — clipboard history formats and pinning.

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge Drop vs Win+V · Support