How to Copy Color in Figma (and Export to Code)

Copying a color from Figma is as simple as selecting the layer, clicking the fill swatch in the right-hand panel, and copying the hex value or RGB string. For code export, use Dev Mode to grab the exact CSS variable or Tailwind class, though you should still verify the final implementation against your design specs to account for rounding or unit differences.

Why Copying Colors in Figma Can Be Tricky

The main friction point isn’t finding the color; it’s ensuring the copied value is usable and accessible in your final build. Figma allows you to copy hex codes easily, but it doesn’t automatically warn you if that specific hex fails contrast checks against your background. Furthermore, copying a single hex code doesn’t give you the derived states (hover, active, disabled) that developers need. If you copy only the base brand color, you risk introducing inconsistent shades in the codebase because different developers might lighten or darken the hex value manually using different algorithms.

How to Copy Hex Codes Directly in Figma

To get the raw value of any shape or text element, select the layer in the canvas or the layers panel. Look at the right-hand sidebar under the "Fill" section. You will see the color swatch and the hex code (e.g., #3B82F6).

You can copy this value in two ways:

1. Click directly on the hex code text to highlight it, then use Ctrl+C (Windows) or Cmd+C (Mac).
2. Right-click the fill swatch and select "Copy hex" or "Copy RGB" depending on your preference.

This method works for solid fills. If you are working with gradients or images, you must use the eyedropper tool (press I) to sample the specific pixel you want, then check the sampled color in the fill panel. Note that sampling from an image may result in a hex value that isn’t part of your design system, so verify it against your brand guidelines before copying it into code.

Inspecting Color Values with Dev Mode

If you are handing off to developers, Dev Mode provides more context than the standard view. Select the layer and toggle "Dev Mode" (or press Shift+D). In the code panel on the right, you can switch between CSS, Swift, and Android views.

For CSS, you will see the color or background-color property. For Tailwind, if your team has set up tokens, you might see the specific class name (e.g., bg-blue-500). If no tokens are mapped, Dev Mode will show the raw hex value. This is critical because it shows you exactly how Figma interprets the color for web output, including any opacity adjustments. If a color has transparency, Dev Mode will show the rgba value or the hex with an alpha channel, which is essential for accurate code implementation.

Generating Accessible Variations from a Base Color

Copying a single hex code is rarely enough for a complete UI component. You typically need a base color, a hover state, an active state, and a disabled state. Manually calculating these in Figma is error-prone. A common mistake is simply adding white or black to the hex value, which can desaturate the color or shift its hue unexpectedly.

Instead, use a tool that calculates variations in a perceptual color space. This ensures that when you lighten or darken a color, the hue remains consistent. You can then copy these generated variations back into your design system or directly into your code.

Worked Example: Brand Blue

Let’s say you have a brand blue #3B82F6 in Figma. You need to copy this to a codebase and create accessible hover and disabled states.

1. Copy the base: In Figma, select the button shape. Click the hex #3B82F6 and copy it.
2. Generate variations: Paste this hex into a color tool that supports perceptual color spaces. You want to generate a lighter shade for hover and a muted shade for disabled.
3. Check contrast: Ensure the text on the button meets WCAG AA standards. For white text on #3B82F6, the contrast ratio is approximately 3.7:1, which meets AA standards only for large text (18pt+ or 14pt bold). If you are using normal-sized text, you will need to darken the blue or lighten the text. While WCAG AA minimums technically exempt inactive/disabled UI components, it is good practice to ensure the disabled state is still legible.
4. Export: Copy the resulting hex codes for the hover and disabled states.

Exporting Figma Colors to CSS and Tailwind

Once you have your base color and its variations, you need to format them for your codebase. Copying raw hex codes into a stylesheet is functional but hard to maintain. It’s better to use CSS variables or Tailwind config objects.

If you are using Tailwind, you can map your copied hex values to the tailwind.config.js file. Here is how you might structure the output for the brand blue example above:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#3B82F6',
          hover: '#60A5FA',
          active: '#2563EB',
          disabled: '#93C5FD',
        }
      }
    }
  }
}

For plain CSS, you would export these as custom properties:

:root {
  --color-brand: #3B82F6;
  --color-brand-hover: #60A5FA;
  --color-brand-active: #2563EB;
  --color-brand-disabled: #93C5FD;
}

Tools like ColorWell can automate this step. By pasting the hex code copied from Figma, you can instantly generate harmonized palettes and export them as ready-to-use CSS or Tailwind tokens. This saves you from manually calculating hex values for each state and ensures the derived shades stay within the correct hue range.

Best Practices for Color Consistency

To avoid the "copy-paste drift" where every developer uses a slightly different shade of blue, establish a single source of truth.

• Name your tokens: Don’t just copy #3B82F6. Name it brand-primary. When you copy the color, copy the token name if possible, or map the hex to a named token in your code.
• Verify contrast early: Before copying a color to code, check its contrast against your primary background and text colors. If it fails, adjust it in Figma first, then copy the corrected value.
• Use semantic naming: Instead of blue-500, use primary-action or surface-elevated. This makes the copied values meaningful in the context of the UI.
• Automate the handoff: If your team uses a design system, use plugins or external tools to sync Figma styles to code tokens. This reduces the manual step of copying individual hex codes.

By combining Figma’s native copy features with a tool that handles variation generation and accessibility checks, you ensure that the colors you copy are not just visually correct, but also functional and accessible in the final product.