Color picker and hex values in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Hex Color Codes

What does the hex color code #FF5733 represent in terms of red, green, and blue values?

A Red: 51, Green: 87, Blue: 255

B Red: 87, Green: 255, Blue: 51

C Red: 255, Green: 87, Blue: 51

D Red: 255, Green: 51, Blue: 87

💡 Hint

Remember that hex codes are in the format #RRGGBB, where each pair represents red, green, and blue in hexadecimal.

The first two characters after the # represent red, the next two green, and the last two blue. FF in hex is 255 in decimal, 57 is 87, and 33 is 51.

❓ dax_lod_result

intermediate

Using Hex Colors in Dashboard Visuals

You want to set a bar chart color dynamically in Power BI using a hex color code stored in a table column named ColorHex. Which DAX measure correctly converts the hex code #1E90FF to a color for the visual?

A ColorMeasure = SELECTEDVALUE(Table[ColorHex])

B ColorMeasure = "#1E90FF"

C ColorMeasure = FORMAT(Table[ColorHex], "Color")

D ColorMeasure = HEX2DEC(Table[ColorHex])

💡 Hint

Power BI visuals accept hex color codes as text strings for color formatting.

The measure returns the hex color code as text from the table column. This text can be used in conditional formatting for colors. Other options either hardcode the color or use invalid functions.

❓ visualization

advanced

Best Practice for Color Contrast in Dashboards

Which option best describes a practice to ensure text is readable over colored backgrounds chosen via hex codes in dashboards?

A Use colors with high contrast ratios and test with tools to ensure accessibility.

B Use any bright color as background and white text always.

C Use colors randomly to keep the dashboard colorful and engaging.

D Use only dark colors for backgrounds and ignore text color contrast.

💡 Hint

Think about how people with vision difficulties read text on colored backgrounds.

High contrast between text and background colors improves readability and accessibility. Tools can check contrast ratios to meet standards.

🎯 Scenario

advanced

Applying Hex Colors in Conditional Formatting

You want to highlight sales values above target in green (#28A745) and below target in red (#DC3545) using hex colors in a Power BI table. Which approach correctly applies this conditional formatting?

A Manually set cell colors in the table without using measures or hex codes.

B Apply conditional formatting only on the background color without using hex codes.

C Use RGB decimal values instead of hex codes in conditional formatting rules.

D Create a measure returning hex color based on sales vs target, then use it in conditional formatting for font color.

💡 Hint

Think about how dynamic colors can be applied based on data values.

Using a measure that returns hex color codes based on conditions allows dynamic and clear formatting in Power BI visuals.

🔧 Formula Fix

expert

Troubleshooting Hex Color Usage in Dashboard

A dashboard developer uses the hex color code #GGHHII in a visual's color setting. What will happen when the dashboard renders?

A The color will render as black because invalid hex codes default to black.

B The dashboard will show an error or default color because <code>#GGHHII</code> is not a valid hex code.

C The dashboard will ignore the color and leave the visual uncolored.

D The dashboard will convert the invalid hex to the closest valid color automatically.

💡 Hint

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

Hex codes with letters outside A-F are invalid and cause errors or fallback to default colors in most BI tools.

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