Color picker

The color picker is being used in many places throughout the app. However, the main color picker (the one that will expand if we tap on the color box at the top right corner) has the most functionality, so this page will mainly talk about that color picker. In other places, a few options might be missing, but it still works in the same manner as the main one.

The color picker has 4 picker types (HSV, HSL, Wheel, and RGB) and 2 states (full-size and compact).

For each type, the panel and the sliders will be utilized to select different values to composite a color.

The main color picker works in sync with the palette panel.

Full-size color picker

1. Picker type

Select the picker type here.

2. Quick color selection

For the main color picker, this will display the history of selected colors. For other places, it will display the colors from the palette. Some won't have this at all.

3. Hex code

This field will display the hex code of the current color. We can tap on this to input our hex code, once entered, the color will be updated to match the entered code.

4. Indicator

Just an indicator on the panel to help us visualize where the current color is.

5. Drag knob

Only the main color picker has this. Drag this to convert the picker to the compact form and move it around the canvas.

6. Value text

The values for the current color. Depending on the active picker type, these will display different value sets.

7. Value sliders

Use these sliders to adjust each channel individually.

8a. Current color

It displays the current selected color.

8b. Previous color

It displays the previously selected color.

Compact color picker

Same as the full-size one, just that many elements are hidden to make the picker smaller.

For the main picker, when it is in this form, it becomes sticky, meaning it will remain on the screen at all times and won't auto-dismiss.

* Customization

Tap on the ... button to show some customization for the compact form

• Whether to show a panel or sliders.

• Whether to include the slider for alpha channel.