Extract Color Styles in Figma From an Imported Web Page

Why imported colors arrive as plain fills

To extract color styles in Figma from an imported page, you create them yourself after the import: select a layer that carries a color you want to keep, click Apply styles or variables in its Fill section, and choose New style or variable. The import gives you the colors. It does not give you names for them.

Know that before you start. UnHTML's product page says text runs keep family, weight, size and color per run, and that gradients map across. It also says repeated type becomes shared Figma text styles on Pro. It does not say that fills become color styles or variables, so treat color styles as a manual step. We cover the text side in components and text styles from an import.

Custom properties explain the rest. A page might store a brown in a custom property on :root and reference it with var() in twenty places. The browser resolves var() to a final value before anything is painted. UnHTML's page does not mention custom properties, so expect plain fills on your layers rather than token names, and check one layer to confirm on your own import.

This tutorial assumes the page is already in Figma and you have can edit access to the file. Figma's help center says anyone with can edit access can create and edit styles.

Pick the colors worth keeping

Don't create a style for every fill. A typical page repeats a handful of colors: a page background, a surface color, body text, a heading color, a brand color, a border color and a few state colors. Pick those first and leave one-off fills alone.

A quick way to decide: click a few layers of the same kind (all the buttons, all the body paragraphs) and see whether they share one color. If they do, it earns a style. If every instance differs, pick the value you want to standardize on.

Create a color style from a selection

This is the route to use when you have a layer in hand.

1. Select the layer whose color you want to keep.
2. In the right sidebar, click Apply styles or variables next to the Fill section.
3. Click New style or variable in the picker.
4. Enter a name and a description. Descriptions show when you hover over the style in the picker.
5. Optionally organize styles into folders.

Figma's create and edit styles page lists what a color style can hold: fill, stroke, image, gradient, pattern and shader fill. In the same dialog you can click the minus next to a property to remove it from the style.

Name with a scheme you will still understand in a month. A common pattern is a role first and a shade second, such as surface/default, text/primary and brand/500. The help page confirms you can organize styles into folders but does not describe slash naming, so check how your own file groups them after you save the first one.

From the Local styles panel

You can also start with nothing selected. Click the plus next to Local styles in the right sidebar, choose a style type from the dropdown, enter a name and description, configure the properties and click Create style. This is slower for an import, because you have to type the color value, but it helps when you already have the hex values from the site's stylesheet.

The eyedropper shortcut

For a long page the eyedropper is faster than the menu route. Toggle it with Control+C or I on Mac, or I on Windows. Then:

1. Hold Command+Shift on Mac or Control+Shift on Windows.
2. Press Enter or click the color you want.
3. In the modal, choose Style or Variable, fill in the fields and press Create.

Figma's eyedropper page says the new item is applied to the selected layer. Press Tab while sampling to switch the displayed value between Hex, RGB, HSL and HSB, which helps when you want to match a value you saw in the source CSS.

Two limits apply as of 2026. Sampling a color from outside the canvas needs Figma Desktop 126.2.10 or newer on macOS 14 or newer, and it is not available on Windows desktop or in the browser. Sampling from layers inside the file works everywhere you have edit access.

Once styles exist, applying them to the rest of the page is quick. Hover over a pixel that has a style, hold Shift and click the layer you want to restyle.

Style or variable for color

The same modal asks you to pick Style or Variable, so decide before you create fifty of them. Figma's variables documentation gives the practical differences:

Variables apply to solid fills, gradient stops, stroke colors and color styles. A style can reference a variable, which means you can create a variable for each core color and a style that points at it. That gives you both: the style handles gradients and multiple properties, and the variable carries the value.

If the page is a one-off teardown, plain styles are enough. If you plan to turn the import into a real design system, set up variables first and build the styles on top. Our piece on building a design system from an imported site covers that path.

Gradients, alpha, and colors that need care

Most colors on a page are simple sRGB values. MDN's color values reference lists hex, rgb(), hsl(), hwb() and named colors as sRGB. Those convert cleanly to a Figma fill.

Three cases deserve a second look:

• Wide-gamut colors. oklch(), lab(), lch() and color() can describe colors outside sRGB. MDN notes that color(display-p3 0 0 1) is equivalent to the out-of-gamut color(srgb 0 0 1.042), so a conversion to sRGB may clip the value. If a brand color looks slightly flatter in Figma, the source stylesheet may use one of these formats.
• currentColor and system colors. These have no fixed value. currentColor resolves to the element's color property, and system colors depend on the user's or operating system's settings. What you see on the imported layer is whatever they resolved to at capture time.
• Gradients. A variable cannot hold a whole gradient, only the color of each stop. If the gradient is a brand asset, make a color style for it. For how CSS gradients land on the canvas in the first place, see how CSS gradients map to Figma.

A short pass to run on every import

No ceremony needed. Run it in this order:

1. Pick five to eight colors that repeat across the page.
2. Create a style or variable for each one with the eyedropper, using a role-first name.
3. Group them in folders by role.
4. Use Shift-click to restyle the stray layers that carry a near match.
5. Delete any style you ended up not using.

Because the import is not a pixel-exact clone, a few fills will differ from the source by small amounts. Fix the ones you can see and move on.

Conclusion

Color styles are a manual step after an import, but a small one. Choose the colors that repeat, create styles from a selection or with the Command+Shift or Control+Shift eyedropper shortcut, and decide early whether variables should sit underneath. Once the palette is named, the rest of the page follows quickly. If you have not imported the page yet, UnHTML brings it into Figma as editable layers.