Color picker and hex values in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI designer working with the marketing team.

📋 Request: Your manager wants a dashboard with consistent brand colors. They ask you to pick colors using hex values to ensure exact matches.

📊 Data: You have a list of brand colors with their hex codes and need to apply them to dashboard elements.

🎯 Deliverable: Create a color palette in Figma using the color picker and hex values, then apply these colors to a sample dashboard mockup.

Sample Data

Color Name	Hex Code
Primary Blue	#1E90FF
Secondary Green	#32CD32
Accent Orange	#FFA500
Background Light	#F5F5F5
Text Dark	#333333

1

Step 1: Open Figma and create a new file for the dashboard design.

No formula needed.

Expected Result

A blank Figma canvas ready for design.

2

Step 2: Use the color picker tool in Figma to create color swatches for each brand color using the hex codes provided.

For each color, enter the hex code in the color picker input field (e.g., #1E90FF for Primary Blue).

Expected Result

Five color swatches appear on the canvas matching the exact brand colors.

3

Step 3: Create a simple dashboard mockup with rectangles representing charts and text boxes for titles.

Draw rectangles and text boxes using Figma's shape and text tools.

Expected Result

A basic dashboard layout with placeholders for charts and titles.

4

Step 4: Apply the brand colors to dashboard elements: Primary Blue for chart bars, Secondary Green for highlights, Accent Orange for callouts, Background Light for the canvas background, and Text Dark for all text.

Select each element and set its fill or text color using the corresponding hex code from the color swatches.

Expected Result

Dashboard elements display consistent brand colors exactly matching the hex codes.

5

Step 5: Review the dashboard colors for accessibility by checking contrast between text and background colors.

Use Figma's built-in contrast checker or a plugin to ensure text color #333333 on background #F5F5F5 meets accessibility standards.

Expected Result

Text is clearly readable with sufficient contrast on the background.

Final Result

Primary Blue

↓

Secondary Green

↓

Accent Orange

↓

Background Light

↓

Text Dark

↓

Chart Bars in Primary Blue

↓

Highlights in Secondary Green

↓

Callouts in Accent Orange

✓Using hex codes ensures exact color matching for brand consistency.

✓Applying colors via the color picker in Figma is straightforward and precise.

✓Checking color contrast helps maintain text readability and accessibility.

Bonus Challenge

Create a Figma component for the color swatch that includes the color block and its hex code label, then reuse it for all brand colors.

Show Hint

Use Figma's component feature to create one swatch, then duplicate and change the fill color and hex code text.

Practice

1. What does a color picker in Figma help you do?

easy

A. Create charts and graphs automatically

B. Write formulas for data calculations

C. Choose colors visually and get their hex codes

D. Import data from Excel files

Solution

1. Step 1: Understand the purpose of a color picker

   A color picker lets you select colors by clicking or dragging on a palette.

2. Step 2: Recognize hex codes usage

   It shows the color's hex code, a 6-digit code starting with #, to use consistently.

3. Final Answer:

   Choose colors visually and get their hex codes -> Option C

4. Quick Check:

   Color picker = Visual color selection + hex code [OK]

Hint: Color picker = visual color + hex code [OK]

Common Mistakes:

• Confusing color picker with data import tools
• Thinking color picker creates charts
• Assuming color picker writes formulas

2. Which of these is the correct format for a hex color code in Figma?

easy

A. 12#3456

B. 123456

C. ##123456

D. #123456

Solution

1. Step 1: Recall hex code format

   Hex codes start with a single # followed by 6 hexadecimal digits (0-9, A-F).

2. Step 2: Check each option

   Only #123456 starts with one # and has 6 digits after it.

3. Final Answer:

   #123456 -> Option D

4. Quick Check:

   Hex code = # + 6 digits [OK]

Hint: Hex codes always start with one # [OK]

Common Mistakes:

• Missing the # at the start
• Using double ##
• Placing # in the middle

3. If you pick a color with hex code #FF5733 in Figma, what color does it represent?

medium

A. A shade of orange-red

B. A shade of green

C. A shade of blue

D. A shade of purple

Solution

1. Step 1: Understand hex color components

   Hex code #FF5733 means Red=FF (255), Green=57 (87), Blue=33 (51).

2. Step 2: Interpret the color

   High red, medium green, low blue creates an orange-red shade.

3. Final Answer:

   A shade of orange-red -> Option A

4. Quick Check:

   #FF5733 = strong red + some green = orange-red [OK]

Hint: High red + medium green = orange-red [OK]

Common Mistakes:

• Mixing up RGB order
• Assuming #FF is blue
• Ignoring hex to decimal conversion

4. You entered the hex code #12G45Z in Figma's color picker but it shows an error. Why?

medium

A. Hex codes must only have numbers

B. Hex codes cannot contain letters beyond A-F

C. Hex codes cannot start with #

D. Hex codes must be 8 digits long

Solution

1. Step 1: Check allowed hex characters

   Hex codes use digits 0-9 and letters A-F only.

2. Step 2: Identify invalid characters

   Letters G and Z are invalid in hex codes, causing the error.

3. Final Answer:

   Hex codes cannot contain letters beyond A-F -> Option B

4. Quick Check:

   Invalid letters cause hex code errors [OK]

Hint: Hex letters only A-F allowed [OK]

Common Mistakes:

• Thinking hex codes need 8 digits
• Believing # is not allowed
• Assuming only numbers allowed

5. You want to keep your BI dashboard colors consistent. Which approach using Figma's color picker and hex codes is best?

hard

A. Save hex codes from Figma's color picker and reuse them in reports

B. Pick colors visually each time without saving hex codes

C. Use random hex codes from the internet

D. Use only black and white colors to avoid confusion

Solution

1. Step 1: Understand color consistency needs

   Consistent colors require reusing exact color codes across reports.

2. Step 2: Use Figma's color picker hex codes

   Saving hex codes from Figma lets you apply the same colors everywhere.

3. Final Answer:

   Save hex codes from Figma's color picker and reuse them in reports -> Option A

4. Quick Check:

   Reuse hex codes = consistent colors [OK]

Hint: Save and reuse hex codes for consistency [OK]

Common Mistakes:

• Picking colors randomly each time
• Using random hex codes without checking
• Limiting to black and white unnecessarily