What Color Picker helps you do

Pick a color and read its HEX, RGB and HSL values, then generate a five-swatch harmony palette from it. It gives you the common color notations for one shade and a matching set of companions, which helps when building a theme rather than choosing a single value in isolation.

Color picking runs in your browser and no values are sent to Haivix.

How it works

Color tools work in numeric color spaces rather than pixels. RGB stores three channels from 0 to 255, hex is the same three bytes written in base 16, and HSL describes hue, saturation and lightness. These values are device-independent numbers; the same hex code can look different on an uncalibrated screen, and print uses CMYK inks that do not map one-to-one to RGB. Everything here is computed locally and copied as text. A value is only a starting point: the surrounding colors, display brightness and viewing conditions change how it reads. Modern CSS also accepts alpha, so a value may carry a fourth channel that older tools ignore.

How to use Color Picker

Choose a base color with the picker.
Read its HEX, RGB and HSL values.
Select a harmony type and review the five swatches.
Click a swatch to adopt it, or copy the palette as a list.

When to use it

Find the exact hex code of a color for CSS.
Convert a chosen color into HSL for a theme.
Get a consistent color value across design and code.
Generate a starting palette for a small brand.
Check the hue rotations that a complementary scheme produces.
Copy a set of swatches into a design token file.

When not to use it

Do not use it for CMYK or LAB conversions.
Do not expect it to sample colors from an uploaded image.
Do not treat generated harmony as an accessibility check.

Example

A picked teal might read as #008080 in HEX, rgb(0, 128, 128) in RGB and hsl(180, 100%, 25%) in HSL. A complementary harmony rotates the hue by 180 degrees and varies lightness across the five swatches. Clicking a generated swatch makes it the new base, so the palette can be explored step by step.

What you can do with Color Picker

Pick a color with the native color input.
Show HEX, RGB and HSL values.
Generate analogous, complementary, triadic or monochromatic palettes.
Switch the base color by clicking any swatch.
Copy the whole palette as HEX values.
Run the color math locally in the browser.

Example: choose a value, then test it in context

Pick a base color and note its values in more than one notation, since design tools and code often expect different formats.

Test the color against the actual background and text, not against a white canvas. Contrast changes with every neighboring color.

Check the result on a second display if the color matters for a brand. Screens vary in calibration and gamut.

Keep the original value in your notes so a failed experiment can be reversed without guessing.

Copy the final value in the notation the destination expects. A hex code with a hash is not always accepted where a bare hex string is.

If the color is for print, treat the screen value as a reference only and confirm with a CMYK proof or a physical sample.

Name the value in the design system rather than scattering raw hex codes. A token makes a later adjustment a single change instead of a search across files.

What to know before you start

It covers HEX, RGB and HSL only, not CMYK or LAB.
The color picker samples a color you choose and does not extract colors from an image.
Harmony palettes are geometric hue rotations, not curated design palettes.
It does not measure contrast against text or backgrounds.

Common mistakes

Assuming a harmony palette is automatically accessible.
Expecting CMYK values for print.
Forgetting that HSL hue is an angle from 0 to 360.
Copying the palette and losing the base color reference.

Troubleshooting

If the values seem rounded, HSL is stored as whole degrees and percentages.

If a swatch looks identical to another, the harmony may collapse at extreme lightness.

If the copied list is missing a value, check the palette rendering before copying.

If the picker opens a system dialog, that is the browser's native control.

Color Picker