Figma Color Picker & Eyedropper Guide: Styles & Variables (2026)

Figma has entirely monopolized the UI/UX design industry. Whether you are designing a simple landing page or a massive, enterprise-level application with hundreds of components, your entire visual language relies heavily on one specific element: Color.

However, the way we handle colors in Figma has undergone a massive paradigm shift. If you are still relying exclusively on hardcoded HEX values or the older "Local Color Styles," your workflow is officially outdated. With the introduction of Figma Variables (Design Tokens) and full support for Display P3 Wide Gamut color spaces, the color picker in Figma is more powerful—and slightly more complex—than ever before.

In this exhaustive 3000-word equivalent masterclass, we are going to tear down every single aspect of color in Figma. We will start with the basic Eyedropper shortcuts, move into advanced gradient blend modes, and finally teach you exactly how to structure Primitive and Semantic variables to create an automated Dark Mode system. Want to see what modern variables look like? Test our interactive Figma Variables Simulator below!

🧪 Try It: Figma Variables & Dark Mode Simulator

📈 The Evolution of Color in Figma

To truly master Figma, you must understand how color management has evolved over the years. This evolution dictates the current best practices.

• Generation 1: Raw HEX Codes. In the early days, designers manually clicked elements and typed `#3B82F6` into the fill panel. If a client wanted to change the blue to a slightly darker shade, the designer had to find and replace that hex code across 200 different frames manually. It was an absolute nightmare.
• Generation 2: Local Color Styles. Figma introduced Styles. You could save `#3B82F6` as a style called "Brand Blue". Changing the style once updated it across the entire document. However, Styles were "flat." You couldn't easily link "Brand Blue" to a Dark Mode theme without relying on clunky third-party plugins.
• Generation 3 (Current): Figma Variables. Introduced in late 2023 and becoming the absolute standard by 2026, Variables (Design Tokens) revolutionized everything. A variable isn't just a color; it contains multiple "Modes" (Light/Dark) and can reference (alias) other variables. This brings Figma's design structure perfectly in line with modern frontend CSS architecture.

🎨 Mastering the Basic Color Picker Panel

When you click the color square, the picker opens. Here is a deep breakdown of its advanced features:

1. Color Space Toggles (HEX, RGB, HSL, HSB, OKLCH)

Below the large color spectrum gradient, you will see a dropdown that usually defaults to HEX. Clicking this allows you to toggle the math behind the color. Modern UI designers frequently switch to HSB (Hue, Saturation, Brightness). Why? Because if you have a blue button and want a darker hover state, you can simply switch to HSB and lower the 'B' value by 10%. It is mathematically faster than guessing a darker HEX code on the color wheel.

2. Opacity vs. Alpha Hex

Next to the HEX code is a percentage input for opacity. If you type 50%, Figma will visually make the color transparent. However, if you are working closely with developers, you can actually type an 8-digit Hex Code (e.g., `#FF000080`) directly into the HEX input field. Figma will automatically convert that `80` alpha channel into the correct 50% opacity slider value!

3. The Document Colors Palette

At the bottom of the picker, Figma displays "Document Colors". This automatically catalogues every unique raw HEX code currently used anywhere in your file. It is incredibly useful for cleaning up a messy file where multiple designers accidentally used `#FFFFFF` and `#FEFEFE` interchangeably.

🔍 The Eyedropper Tool (Shortcuts & Secrets)

The Eyedropper is arguably the most used tool in a designer's arsenal. It allows you to steal, match, and clone colors from reference images instantly.

🌈 Color Spaces: sRGB vs Display P3

By default, older versions of Figma operated purely in the sRGB color space. However, modern Apple devices and high-end monitors use the Display P3 wide-gamut color space, which holds millions of ultra-vibrant colors that sRGB simply cannot display.

Figma now supports Display P3! If you want to design with the brightest, most saturated neons possible:

1. Deselect everything on your canvas.
2. Click the main Figma menu (top left) > Preferences > Color Space.
3. Switch from sRGB to Display P3.

Note: Only do this if your target audience uses modern devices (like iOS apps). If you are designing a dashboard for enterprise corporate laptops, stick to sRGB to ensure what you design is exactly what they see.

📚 The Legacy Method: Local Color Styles

While Variables are the new standard, Color Styles are still heavily used, especially for complex Gradients, Shadows, and Blurs (which Variables do not fully support yet).

How to Create a Color Style:

1. Draw a square and fill it with your desired color (e.g., `#FF5733`).
2. In the right panel, click the four-dots icon (Style icon) next to the "Fill" header.
3. Click the + (Plus) icon to create a new style.
4. Name your style. Pro Tip: Use slashes to create folders. Naming it Primary / Brand Red will automatically put it inside a folder called "Primary".

Once saved, you can apply this Style to text, borders, and backgrounds. Updating the Style once will cascade the change across your entire file.

⚡ The Modern Standard: Figma Color Variables

To use variables properly, you must adopt the Two-Tier Token System:

Tier 1: Primitives (The Raw Palette)

Primitives are your base colors. You name them exactly what they are, usually following a numeric scale (like Tailwind CSS). For example:
blue-100, blue-500, gray-900, white.
Rule: You never apply a primitive variable directly to a UI element. They are just the raw materials.

Tier 2: Semantics (The Intent)

Semantic variables describe how the color is used, not what it looks like. For example:
button-primary-bg, text-secondary, surface-background.
You then Alias (link) the semantic variable to the primitive variable. So, button-primary-bg points to blue-500. If your brand rebrands to green next year, you don't change the UI; you just change the alias so button-primary-bg points to green-500. This is enterprise-level design architecture.

🌙 Step-by-Step: Setting Up a Dark Mode System

The true power of Variables is building instant Dark Modes. If you played with the Simulator at the top of this page, here is exactly how to build that in your own Figma file:

1. Deselect everything and click the Local Variables icon (sliders) in the right panel.
2. Create a collection called Tokens and add the Semantic variables listed above.
3. Click the + (Plus) icon at the top right of the variables table to add a second mode column. Name Column 1 "Light" and Column 2 "Dark".
4. Map the aliases as shown in the table above. (Right-click the variable input cell and select 'Create Alias').
5. The Magic: Draw a frame on your canvas and set its background to surface-bg. Place text inside and set it to text-primary.
6. Select the parent Frame. Look at the right panel under the "Layer" section. You will see an icon that looks like intersecting circles (Variables Mode). Click it, and change the frame from "Auto" to "Dark". The entire UI inside the frame will instantly invert to dark mode!

🔌 Top 5 Color Plugins for Figma (2026)

While Figma's native tools are powerful, the community has built incredible plugins to speed up your workflow.

1. Color Blind (by Sam): Instantly clones your design and applies 8 different color-blindness filters (Protanopia, Deuteranopia, etc.) to ensure your colors are accessible to all users.
2. Contrast (by NothingWorks): A tiny, floating widget that checks the WCAG contrast ratio (e.g., 4.5:1) between your selected text and its background in real-time as you drag the color picker.
3. Coolors: The ultimate palette generator. If you have designer's block, open this plugin to instantly generate thousands of mathematically harmonious color palettes and add them directly to your Figma Local Styles.
4. Image Palette: Select any photograph on your canvas, run this plugin, and it will extract the 5 most dominant colors from the image and place them as beautiful circular swatches below the photo.
5. Chroma Colors: The fastest way to bulk-create Styles. Draw 50 squares, fill them with different colors, name the layers, run Chroma, and it instantly converts all 50 squares into named Figma Color Styles.

❓ Frequently Asked Questions