Bird
Raised Fist0
Figmabi_tool~8 mins

Color picker and hex values in Figma - Dashboard Guide

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Dashboard Mode - Color picker and hex values
Dashboard Goal

Help users select colors and see their hex codes to use in reports and visuals.

Sample Data
Color NameHex Value
Red#FF0000
Green#00FF00
Blue#0000FF
Yellow#FFFF00
Black#000000
White#FFFFFF
Orange#FFA500
Dashboard Components
  • Color Picker Panel: Interactive panel where users pick a color visually. Updates hex value display.
  • Hex Value Display Card: Shows the hex code of the selected color. Updates dynamically.
  • Color Palette Table: Shows predefined colors and their hex codes from sample data.
Dashboard Layout
+----------------------+---------------------+
|                      |                     |
|   Color Picker Panel  |  Hex Value Display   |
|                      |                     |
+----------------------+---------------------+
|                                              |
|           Color Palette Table                 |
|                                              |
+----------------------------------------------+
Interactivity

When a user picks a color in the Color Picker Panel, the Hex Value Display Card updates to show the selected color's hex code. The Color Palette Table remains static but helps users choose from common colors.

Self Check

If you select the color green in the Color Picker Panel, what hex value appears in the Hex Value Display Card?

Answer: #00FF00

Key Result
Interactive dashboard to pick colors and see their hex codes alongside a palette of common colors.

Practice

(1/5)
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