Advanced Color Picker

The color picker in Azyrom provides professional color selection with multiple color modes, precise input, opacity control, and 64 preset colors.

Opening the Color Picker

Click any color swatch in the Properties Panel to open the color picker:

Fill color - Click the fill swatch
Stroke color - Click the stroke swatch
Text color - Click the text color swatch
Shadow color - Click the shadow color swatch

Color Picker Components

Color Area

The main gradient square lets you pick saturation (left-right) and brightness (top-bottom). Click or drag anywhere to select a color.

Hue Slider

The vertical rainbow strip controls the hue (base color). Drag up or down to cycle through the color spectrum from red through yellow, green, cyan, blue, and magenta.

Opacity Slider

Controls transparency from 0% (fully transparent) to 100% (fully opaque). The checkerboard pattern shows how transparent the color will be.

Color Modes

Switch between color modes using the mode tabs at the top of the picker:

RGB Mode

Define colors using Red, Green, and Blue values (0-255 each):

R - Red component (0-255)
G - Green component (0-255)
B - Blue component (0-255)

HSL Mode

Define colors using Hue, Saturation, and Lightness:

H - Hue (0-360 degrees on the color wheel)
S - Saturation (0-100%, gray to vivid)
L - Lightness (0-100%, black to white)

HSB Mode

Define colors using Hue, Saturation, and Brightness:

H - Hue (0-360 degrees)
S - Saturation (0-100%)
B - Brightness (0-100%)

When to Use Each Mode

RGB is best for matching exact color codes. HSL is great for creating color variations (adjust L for lighter/darker). HSB is intuitive for designers thinking in terms of "how colorful" and "how bright."

Hex Input

Enter exact color codes in the hex field:

Format: #RRGGBB (e.g., #7c3aed)
Short format: #RGB (e.g., #f00 for red)
With alpha: #RRGGBBAA (e.g., #7c3aed80 for 50% opacity)

Color Presets

64 preset colors are available for quick selection, organized by hue and saturation. Click any preset to apply it instantly.

Eyedropper Tool

Sample colors from anywhere on the canvas:

Press E or click the eyedropper icon in the color picker
Click on any element to sample its color
The sampled color is applied to the current selection

Pro Tip

Select elements first, then use the Eyedropper (E) to quickly copy colors from other elements. The eyedropper samples fill colors from shapes, stroke colors from lines, and text colors from text elements.

Recent Colors

The color picker remembers your recently used colors, showing them in a row for quick access. This makes it easy to reuse colors across your design without remembering exact values.

Working with Opacity

Opacity affects how transparent a color is:

100% - Fully opaque (solid color)
50% - Semi-transparent (shows elements behind)
0% - Fully transparent (invisible)

Note: Color opacity is separate from element opacity. An element at 50% opacity with a 50% opacity fill results in 25% overall opacity for that fill.