Color picker and hex values in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a hex color value?

A hex color value is a six-digit code that represents a color using numbers and letters. It starts with a # and shows how much red, green, and blue is in the color.

beginner

How do you open the color picker in Figma?

Click on the fill or stroke color box in the right panel. This opens the color picker where you can choose colors or enter hex values.

beginner

What does the hex code #FF0000 represent?

It represents pure red. FF means full red, and 00 means no green or blue.

beginner

Why are hex values useful in design?

Hex values let you pick exact colors and share them easily. They help keep colors consistent across designs and tools.

beginner

Can you enter a hex value directly in Figma's color picker?

Yes, you can type the hex code in the input box in the color picker to set a specific color.

What symbol starts a hex color code?

A &

B $

C @

D #

Hex color codes always start with a # symbol.

In Figma, where do you find the color picker?

A In the fill or stroke color box

B In the layers panel

C In the text tool

D In the export settings

The color picker opens when you click the fill or stroke color box.

What color does #0000FF represent?

A Blue

B Green

C Red

D Yellow

#0000FF means no red, no green, full blue.

Why use hex values in design?

A To create random colors

B To keep colors consistent

C To change font size

D To add shadows

Hex values help keep colors consistent across designs.

Can you type a hex code directly in Figma's color picker?

A No

B Only for text colors

C Yes

D Only in plugins

You can type hex codes directly in the color picker input box.

Explain how to use the color picker in Figma to select a color using a hex value.

Think about where the color boxes are and how you can type the code.

Describe what a hex color code is and why it is important in design.

Focus on what the code means and how designers use it.

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