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.
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.
Last updated
Was this helpful?