0
0
Figmabi_tool~8 mins

Color picker and hex values in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
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.