Advanced Color Picker

Professional-grade color picker with simultaneous control over HEX, RGB, HSL, HSV, CMYK and RGBA. Eyedropper support (in Chromium browsers), favorites, history and JSON export.

#155EEF

All Color Formats

R
G
B
H
S
L
H
S
V
C
M
Y
K
A

Named Color Search

Recent Colors

Favorites

What Is an Advanced Color Picker?

An advanced color picker combines every color format in a single interface, letting designers and developers control colors with precision. Where a basic picker shows HEX and RGB, an advanced picker also exposes HSL, HSV, CMYK and RGBA (alpha transparency), plus convenient extras like a browser-native eyedropper, favorites and history.

OmniColor's advanced picker is built for professional work: every input is bidirectional (change any field and all others update), every value can be copied with one click, and favorites are saved in your browser using localStorage.

All Supported Color Formats

HEX — 6-digit code (e.g. #155EEF). The standard notation in HTML and CSS.

RGB — three integers 0–255. Common in JavaScript, canvas and WebGL.

HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Intuitive for building palettes and design tokens.

HSV — hue, saturation, value. Common in color picker tools and image editors.

CMYK — cyan, magenta, yellow, black. Print-only. Conversion from RGB is approximate.

RGBA — RGB plus alpha (0–1). Enables transparency in CSS and canvas.

Eyedropper Support

On Chromium browsers (Chrome, Edge, Opera) and modern Safari, the advanced picker can activate the browser's native EyeDropper API. Click "Eyedropper" and then click anywhere on your screen to sample a pixel — even from another app. If your browser does not support the API, the button is hidden automatically.

Use Cases

  • Design system tokens: Generate HSL values with precise hue/saturation/lightness for token scales.
  • CSS variable generation: Use the values from any format to build theme variables.
  • Print preparation: Get CMYK values from a screen color to guide print runs.
  • Accessibility: Copy RGBA values for translucent overlays that need to pass contrast checks.
  • Canvas / WebGL development: Use precise RGB or HSV values as rendering inputs.

Frequently Asked Questions