Color Picker Guide

Everything you can do with the OmniColor online color picker — from picking your first color to copying production-ready values in every format.

What This Guide Covers

This guide walks through every feature of the OmniColor color picker, explains the underlying color models, and shows practical examples of how to use the tool for real design and development work.

By the end, you will understand:

  • How the picker's interface is organized
  • How hue, saturation, brightness and alpha interact
  • What each color format (HEX, RGB, HSL, HSV, CMYK) means
  • How to copy colors in the format you need
  • How to save favorites and view your recent colors
  • How to download a color's full data for reference

Opening the Picker

Open the tool: Color Picker →

The picker has three main areas:

  • Left side: A large square where you pick saturation and brightness.
  • Right side: A color preview, hue slider and alpha slider.
  • Below: Input fields for HEX, RGB and HSL values, plus a value display panel.

The Hue Slider

The hue slider is the horizontal rainbow bar. Hue is the "color of the color" — its position on the color wheel from 0° to 360°:

  • 0° — Red
  • 60° — Yellow
  • 120° — Green
  • 180° — Cyan
  • 240° — Blue
  • 300° — Magenta
  • 360° — Red again (full circle)

Click anywhere on the hue slider to set the base hue. Everything else in the picker responds to this base.

The Saturation & Brightness Square

This is the large gradient square on the left. It has two axes:

  • Horizontal axis: Saturation (left = gray, right = fully saturated)
  • Vertical axis: Brightness (top = bright, bottom = black)

Click anywhere in the square to pick the specific color you want. A circle marker shows your current position.

Dragging works too — press and hold, then drag to see the preview update live.

The Alpha (Opacity) Slider

Below the hue slider is the alpha slider. It shows a checkerboard pattern (representing transparency) with a gradient of your current color overlaid. Moving the slider left decreases opacity (more transparent), moving right increases it (more opaque).

The color preview above the sliders updates live to show the actual composited appearance.

Manual Input Fields

Below the interactive controls are input fields for precise values:

  • HEX: Type or paste a 6-digit hex code like #155EEF
  • RGB: Three channels, each 0–255
  • HSL: Hue 0–360, saturation 0–100, lightness 0–100
  • Alpha: 0–100 percent

Any of these inputs updates all the others — they stay in sync.

Copying Values

Each input row has a Copy button. Clicking copies the corresponding value to your clipboard. You can also click the small copy icon next to any value.

The following formats can be copied:

  • HEX — e.g. #155EEF
  • RGB — e.g. rgb(21, 94, 239)
  • HSL — e.g. hsl(215, 84%, 51%)
  • HSV — e.g. hsv(215, 84%, 94%)
  • CMYK — e.g. cmyk(91%, 61%, 0%, 6%)

Recent Colors & Favorites

Every HEX value you copy or select is saved in your recent colors list — up to 24 recent colors shown as swatches. Click any recent swatch to load that color back into the picker.

To save a favorite, click the "Save Favorite" button. Favorites are stored in your browser's localStorage and persist across visits.

To remove a favorite, double-click its swatch.

Random Color Button

Click "Random" to generate a random color and load it into the picker. Useful for testing, inspiration, or when you want to see something unexpected.

Download Color Data

Click "Download JSON" to save the current color's full data as a JSON file. The file includes:

  • HEX, RGB, HSL, HSV and CMYK values
  • Alpha value
  • Timestamp

Useful for keeping records of colors you decide on, or for importing into other tools that accept JSON.

Understanding the Color Formats

HEX

A six-digit hexadecimal code like #155EEF. Two hex digits each for red, green and blue channels. The most common color format in HTML and CSS.

RGB

Three integers from 0 to 255 representing red, green and blue light intensity. The same information as HEX, but written in decimal.

HSL

Hue (0–360°), saturation (0–100%) and lightness (0–100%). More intuitive for adjustment because the three properties are independent.

HSV

Like HSL but with "value" (brightness) instead of lightness. HSV is what most pickers use internally.

CMYK

Cyan, magenta, yellow and black percentages. The print color space. Conversion from RGB is approximate because print and screen gamuts differ.

Practical Examples

Example 1: Picking a brand blue

You want a specific blue for a button. Start with the hue slider at 215° (blue range). Move the saturation selector to about 84% (vivid but not neon). Set brightness at about 94% (bright but not washed out). Copy the HEX value — you get #155EEF. Use this in your CSS: background: #155EEF;

Example 2: Adding a transparent overlay

You want a semi-transparent dark overlay for text readability over an image. Pick your dark color (or use #15243B from the picker). Move the alpha slider to 50%. Copy the RGBA value — you get rgba(21, 36, 59, 0.5). Use it as background: rgba(21, 36, 59, 0.5);

Example 3: Matching a color from a screenshot

Take a screenshot. Use the Image Color Picker to load the screenshot and click on the color you want to match. Note the HEX value, then paste it into the regular picker to explore variations.

Related Tools

Frequently Asked Questions

Open the Color Picker →