Color picker and hex values in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the hex color value from the color picker.

Figma

const selectedColor = colorPicker.[1];

Drag options to blanks, or click blank then click option'

AhexValue

BcolorCode

Cvalue

DcolorHex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'colorCode' which is not a valid property.

Using 'value' which might refer to other formats.

The property hexValue holds the hex code of the selected color in the color picker.

2fill in blank

medium

Complete the code to convert the hex color to RGB format.

Figma

const rgbColor = hexToRgb([1]);

Drag options to blanks, or click blank then click option'

AcolorPicker.value

BcolorHex

CselectedColor

DcolorPicker.hex

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'colorPicker.value' which may not be the hex code.

Using 'colorHex' which is undefined.

The variable selectedColor holds the hex value which is passed to the hexToRgb function.

3fill in blank

hard

Fix the error in the code to correctly update the color preview background.

Figma

colorPreview.style.backgroundColor = [1];

Drag options to blanks, or click blank then click option'

A'selectedColor'

BselectedColor

CcolorPicker.hexValue

D'#' + selectedColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name, which assigns a string literal.

Concatenating '#' again when it's already included.

The backgroundColor property expects a string with the color value. Since selectedColor already contains the hex string (including '#'), it can be assigned directly.

4fill in blank

hard

Fill both blanks to create a function that returns true if the hex color is valid.

Figma

function isValidHex(hex) {
  return /^[1]$/.test(hex);
}

Drag options to blanks, or click blank then click option'

A[0-9A-Fa-f]{6}

B#[0-9G-Za-f]{6}

C#[0-9A-Fa-f]{3}

D#[0-9A-Fa-f]{6}

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid characters like 'G' in the regex.

Missing the '#' at the start.

The regex #[0-9A-Fa-f]{6} matches a valid 6-digit hex color starting with '#'.

5fill in blank

hard

Fill the blanks to extract the red, green, and blue components from a hex color string.

Figma

const red = parseInt(hexColor.slice([1], [2]), 16);
const green = parseInt(hexColor.slice([3], [4]), 16);
const blue = parseInt(hexColor.slice([5], [6]), 16);

Drag options to blanks, or click blank then click option'

A1

B3

C5

D7

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect slice indices that overlap or miss characters.

Starting slice at 0 which includes '#'.

To extract RGB from a hex string like '#RRGGBB', slice indices are: red (1-3), green (3-5), blue (5-7).