Free Online Color Picker
Pick any color visually and copy it as HEX, RGB, HSL, HWB, OKLCH, Lab, LCH, CMYK, CSS or a CSS variable. Everything runs in your browser — no account, no uploads.
What is a color picker?
An online color picker is a browser tool that lets you select a color visually — by dragging inside a color field, adjusting hue, or typing a value — and instantly returns the color in every format you might need: HEX, RGB, HSL, HWB, OKLCH, Lab, LCH, CMYK, CSS and design tokens.
Designers use pickers to explore palettes, match a brand color, or verify a client’s hex code. Developers use them to convert colors, generate CSS variables, and test contrast. Omni Color’s picker does all of that in a single screen, with no upload and no account.
How the Omni Color picker works
-
Choose a colorClick or drag anywhere inside the saturation/lightness area to select the base color. The current hue appears in the bar directly below it.
-
Fine-tune with slidersUse the hue slider to change the hue (0°–360°) and the alpha slider to control transparency. The preview updates in real time.
-
Switch numeric modesClick HEX, RGB, HSL, HWB or OKLCH to enter exact values for that format. Every change is reflected across all other outputs.
-
Copy any outputClick a row to copy the value, or use the copy button. The current color is always encoded in the page URL — share or bookmark it directly.
Every format explained
| Format | Example | Best for |
|---|---|---|
HEX | #4f46e5 | CSS, design tools, documentation |
RGB | rgb(79 70 229) | Modern CSS, canvas, JavaScript |
HSL | hsl(243 75% 59%) | Intuitive adjustments, themes |
HWB | hwb(243 31% 10%) | Whiteness/blackness control |
OKLCH | oklch(53% 0.24 273) | Perceptually uniform palettes |
LAB | lab(45% 42 -78) | Print and color science |
LCH | lch(45% 88 298) | Perceptually uniform CMYK-adjacent work |
CMYK | cmyk(65% 69% 0% 10%) | Print production reference |
Practical use cases
Paste your brand hex code and instantly see RGB, HSL and OKLCH equivalents for print, web and modern CSS workflows.
Copy the CSS variable output (--color-primary: #4f46e5;) directly into your tokens file or utility library.
The contrast preview panel shows the WCAG ratio against white, black, light and dark gray backgrounds.
Star colors you want to reuse. Favorites and recent colors are stored locally on your device — never on a server.
Frequently asked questions
What is the difference between RGB and HSL?
RGB describes a color as a combination of red, green and blue light values. HSL describes the same color as a hue (0–360°), saturation (%) and lightness (%) — which is often more intuitive for adjusting colors. Both describe the same sRGB color space; only the representation differs.
Why does the picker show OKLCH?
OKLCH is a perceptually uniform color space. Two colors with the same lightness in OKLCH look equally light to the human eye — something that isn’t true of HSL or RGB. This makes OKLCH excellent for generating palettes and accessible scales.
Is this picker available offline?
Yes. Omni Color is a Progressive Web App. After your first visit, the picker and every conversion work without a network connection.
Does the picker upload anything?
No. Every calculation runs in your browser using plain JavaScript. No images, colors or palettes are sent to any server.