Color picker and hex values in Figma - Deep Dive

Overview - Color picker and hex values

What is it?

A color picker is a tool in Figma that lets you choose colors visually for your designs. Hex values are six-digit codes that represent colors in a way computers understand. Together, they help you pick and use exact colors consistently in your projects. This makes your designs look professional and uniform.

Why it matters

Without a color picker and hex values, designers would struggle to pick exact colors or share them accurately. This would lead to inconsistent designs and confusion among teams. Using these tools ensures everyone uses the same colors, improving communication and the final product's quality.

Where it fits

Before learning about color pickers and hex values, you should understand basic design concepts like color theory and user interface basics. After mastering this, you can explore advanced color management, accessibility in colors, and creating design systems in Figma.

Mental Model

Core Idea

A color picker lets you select colors visually, and hex values encode those colors as exact codes for consistent use.

Think of it like...

It's like choosing paint from a color swatch and writing down the exact paint code so you can buy the same color again anytime.

┌───────────────┐   ┌───────────────┐
│ Color Picker  │──▶│ Hex Value     │
│ (Visual Tool) │   │ (6-digit code)│
└───────────────┘   └───────────────┘
       │                  │
       ▼                  ▼
  Select color       Use exact color
  visually           in designs

Build-Up - 7 Steps

1

Foundation

Understanding Color Basics

Concept: Introduce what colors are and how they appear on screens.

Colors on screens are made by mixing red, green, and blue light in different amounts. This is called RGB color model. Each color can be described by numbers showing how much red, green, and blue it has.

Result

You know that colors are combinations of red, green, and blue light values.

Understanding that colors are made from red, green, and blue helps you grasp how digital colors work and why exact codes matter.

2

Foundation

What is a Hex Value?

Concept: Explain hex values as a way to write RGB colors in a short code.

Hex values use six characters combining numbers and letters to represent red, green, and blue amounts. For example, #FF0000 means full red, no green, no blue (pure red). Each pair of characters stands for one color part.

Result

You can read and understand hex codes as color instructions for computers.

Knowing hex codes lets you communicate colors precisely without guessing or describing them vaguely.

3

Intermediate

Using the Color Picker in Figma

Concept: Learn how to open and use Figma's color picker to select colors visually.

In Figma, click on a color property to open the color picker. You can drag inside the color field to choose a shade or enter a hex value directly. The picker shows the hex code updating as you move the selector.

Result

You can pick any color visually and see its exact hex code in Figma.

Seeing the hex code change as you pick colors helps connect visual choices with exact color codes.

4

Intermediate

Copying and Applying Hex Values

Concept: How to copy hex values from Figma and reuse them in other places.

After picking a color, select the hex code text and copy it. You can paste this code into other design elements or share it with teammates to keep colors consistent.

Result

You can reuse exact colors across your design or with others by sharing hex codes.

Copying hex values ensures color consistency, which is key for professional and cohesive designs.

5

Intermediate

Adjusting Transparency with Hex and Picker

🤔Before reading on: do you think hex codes can include transparency? Commit to yes or no.

Concept: Learn how transparency (opacity) works with colors in Figma and hex codes.

Standard hex codes do not include transparency. Figma uses a separate opacity slider to adjust transparency. Some extended hex formats (8 characters) can include transparency, but Figma mainly uses the slider for this.

Result

You understand that transparency is controlled separately from hex color codes in Figma.

Knowing transparency is separate prevents confusion when hex codes don’t show opacity changes.

6

Advanced

Hex Codes and Color Profiles

🤔Before reading on: do you think hex codes look the same on all screens? Commit to yes or no.

Concept: Explore how hex colors can appear differently depending on screen settings and color profiles.

Hex codes define colors in a standard way, but screens may display them differently due to brightness, calibration, or color profiles like sRGB. This means the same hex code might look slightly different on different devices.

Result

You realize hex codes are exact instructions, but real-world color can vary by device.

Understanding device differences helps you test designs on multiple screens for consistent appearance.

7

Expert

Limitations and Extensions of Hex Values

🤔Before reading on: do you think hex codes can represent all colors humans see? Commit to yes or no.

Concept: Learn about the limits of hex codes and how advanced color formats extend beyond them.

Hex codes represent colors in the RGB space, which covers many but not all visible colors. Some colors outside this range require other formats like HSL or LAB. Also, hex codes don't handle color management or gamma correction, which professionals manage with color profiles.

Result

You understand hex codes are a practical but limited way to represent color in digital design.

Knowing hex limitations prepares you for advanced color work and professional color management.

Under the Hood

The color picker in Figma translates your visual selection into numeric RGB values. These values are then converted into a hex string by converting each color channel (red, green, blue) from decimal (0-255) to hexadecimal (00-FF). This hex string is stored and used to render the color consistently across the design.

Why designed this way?

Hex codes were designed as a compact, human-readable way to represent RGB colors in web and digital design. They are shorter than writing decimal RGB values and fit well with web standards. The color picker provides an intuitive interface so users don't need to know hex math to pick colors.

┌───────────────┐
│ User picks    │
│ color visually│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ RGB values    │
│ (0-255 each)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Convert to    │
│ Hex string    │
│ (#RRGGBB)     │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Store & render│
│ color in UI   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does changing the hex code always change the color's transparency? Commit to yes or no.

Common Belief: Changing the hex code can adjust transparency of a color.

Reality: Standard hex codes only represent color, not transparency. Transparency is controlled separately in Figma.

Why it matters: Confusing hex codes with transparency leads to unexpected design results and frustration when opacity changes don't appear.

Quick: Do hex codes look exactly the same on every screen? Commit to yes or no.

Common Belief: A hex code color looks identical on all devices.

Reality: Colors can appear different due to screen calibration, brightness, and color profiles, even if the hex code is the same.

Why it matters: Assuming colors look the same everywhere can cause design inconsistencies and poor user experience.

Quick: Can hex codes represent every color humans can see? Commit to yes or no.

Common Belief: Hex codes can represent all visible colors perfectly.

Reality: Hex codes cover the RGB color space, which is limited and does not include all colors visible to the human eye.

Why it matters: Expecting hex codes to cover all colors can limit design creativity and cause confusion in advanced color work.

Quick: Is the color picker just a fancy way to guess colors? Commit to yes or no.

Common Belief: The color picker is only a visual guess tool without precision.

Reality: The color picker precisely converts visual choices into exact hex codes for consistent use.

Why it matters: Underestimating the color picker can lead to ignoring its power for exact color communication.

Expert Zone

1

Hex codes do not include alpha transparency by default, but some systems use 8-digit hex codes to add this, which Figma handles differently.

2

Color appearance depends on device profiles; professionals often use color management tools alongside hex codes to ensure consistency.

3

Figma's color picker updates hex codes in real time, linking visual and code representations tightly, which helps avoid errors.

When NOT to use

Hex codes are not suitable when working with colors outside the RGB space or when precise color management is required; in these cases, use color profiles, HSL, LAB, or Pantone systems.

Production Patterns

Design teams use hex codes to create shared style guides and design systems in Figma, ensuring consistent branding across products and platforms.

Connections

Color Theory

Builds-on

Understanding color theory helps you choose harmonious colors before using the picker and hex codes for exact application.

Web Development

Same pattern

Hex values are used in both design and web coding, so knowing them bridges design and development for smoother collaboration.

Digital Photography

Related concept

Both use RGB color models and color profiles, so knowledge of hex codes helps understand color editing and calibration in photos.

Common Pitfalls

#1 Trying to set transparency by changing hex code digits.

Wrong approach:

Set color to #FF000080 to make red semi-transparent in Figma by typing hex code.

Correct approach:

Set color to #FF0000 and adjust opacity slider to 50% in Figma.

Root cause:

Misunderstanding that standard hex codes do not include transparency and that opacity is controlled separately.

#2 Copying hex code from one design and pasting without checking device differences.

Wrong approach:

Assuming #00FF00 looks the same on all screens without testing.

Correct approach:

Test colors on multiple devices and adjust if needed for consistent appearance.

Root cause:

Ignoring how screen calibration and profiles affect color display.

#3 Entering invalid hex codes with wrong length or characters.

Wrong approach:

Typing #GGHHII as a hex code in Figma.

Correct approach:

Use valid hex codes like #A1B2C3 with only 0-9 and A-F characters.

Root cause:

Not knowing hex code format rules and allowed characters.

Key Takeaways

Color pickers let you choose colors visually while hex values encode those colors as exact codes for consistent use.

Hex values are six-digit codes representing red, green, and blue amounts in hexadecimal format.

Transparency is controlled separately from hex codes in Figma, usually with an opacity slider.

Colors with the same hex code can look different on various screens due to device differences.

Hex codes cover many but not all visible colors; advanced color work may require other formats.