# 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.

{% hint style="info" %}
The main color picker works in sync with the [palette panel](/palette/overview.md).
{% endhint %}

### Full-size color picker

<figure><img src="/files/JgpPlxmNXnRWyzSLyTS5" alt="" width="375"><figcaption></figcaption></figure>

#### 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

<figure><img src="/files/MwZ9zh9jVd2xf1VxpvZq" alt="" width="375"><figcaption></figcaption></figure>

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:

* Full size:
  * Bigger: make the color box bigger for easier selection
  * Palette match: automatically select the closest color from the active palette. Really handy when we want to work with a limited color count and in indexed mode.
* Compact:
  * Whether to show a panel or sliders.
  * Whether to include the slider for the alpha channel.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pixquare.art/tools/color-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.