Free Online Color Picker & Color Tools
Pick, convert, mix, compare and generate colors with a fast browser-based toolkit for designers and developers. Every conversion runs on your device — nothing is uploaded.
Every color format, one click away
The picker above outputs all popular color formats as you move. Copy any value straight into CSS, design tokens or code.
Popular color tools
A complete set of browser-based utilities for picking, converting, testing and generating colors — built for designers and developers.
Color Picker
Pick any color visually with HEX, RGB, HSL, HWB, OKLCH and alpha controls. Copy in one click.
Color Converter
Convert HEX to RGB, HSL, HWB, OKLCH, Lab, LCH, CMYK and CSS instantly with live preview.
Palette Generator
Generate harmonious palettes with 20+ modes and export to CSS, JSON or SVG.
Gradient Generator
Build linear, radial and conic CSS gradients with unlimited stops and export options.
Color Mixer
Mix two colors in sRGB, HSL, OKLab, OKLCH, LAB or LCH and preview the result live.
Contrast Checker
Check WCAG AA and AAA contrast ratios with plain-language feedback and suggestions.
Shades Generator
Create 50–950 shade scales from any base color for design systems and tokens.
Color Blindness Simulator
Preview colors and palettes under seven types of color vision deficiency.
Harmonious palettes in seconds
Generate monochromatic, analogous, complementary, triadic, tetradic and twenty other palette styles. Lock the colors you like and regenerate the rest.
- 21 palette modes — classic, mood, style and theme
- Lock, shuffle and regenerate individual swatches
- Export CSS variables, JSON, SVG or plain text
- Share any palette via a URL — no account required
Beautiful CSS gradients, built live
Pick your colors, set the angle, add as many stops as you need, and copy the CSS. Radial and conic gradients are also supported.
Aurora
Teal → indigo → pink at 135°.
Sunset
Warm orange to violet horizon.
Ocean
Sky blue to deep teal.
Check contrast before you ship
Instantly see WCAG AA, AAA and APCA results for any foreground/background pair. When a combination fails, we suggest accessible alternatives and explain exactly why.
Developer color toolkit
Everything you need to ship a design system: CSS variables, JSON tokens, Tailwind configs, SVG palettes and PNG exports — all client-side.
Browse colors by family
Explore reds, blues, greens and every other family — each page includes HEX, RGB, HSL, shades, complementary colors and accessibility notes.
Color theory, explained clearly
Understand the color wheel, primary, secondary and tertiary colors, harmonies, warmth and the difference between tints, shades and tones — all with practical examples.
What colors communicate
Colors are often associated with moods and meanings, though context always matters. Our color psychology pages use careful, evidence-aware language.
Practical guides for real projects
Step-by-step resources for choosing website colors, building accessible palettes, designing SaaS themes and creating design tokens.
A structured method for picking a brand color, a neutral system and accent colors that actually work together.
How to make sure your foreground and background pairs pass WCAG AA and AAA across all your components.
A repeatable approach to building a semantic color system for a modern SaaS product.
Define primitives, aliases and component tokens that scale from a single color to a full theme.
How six-digit hex codes are structured and how to read them at a glance.
Why OKLCH is becoming the default for perceptually uniform color work on the web.
Frequently asked questions
What is a color picker?
A color picker is a browser-based tool that lets you choose a color visually and returns its value in multiple formats such as HEX, RGB, HSL, OKLCH or CSS. Omni Color's picker also shows contrast, shades and formatted output for each format as you drag.
How do I find a HEX color?
Use the picker at the top of this page to select a color visually or paste any RGB/HSL value. The HEX code appears instantly, along with RGBA, HSL, OKLCH and 15 other formats. Click any value to copy it to your clipboard.
How do I convert HEX to RGB?
Paste your HEX value into the Color Converter. It outputs RGB, RGBA, HSL, HWB, OKLCH, Lab, LCH, CMYK and CSS. The conversion happens entirely in your browser — nothing is uploaded.
What contrast ratio is accessible?
WCAG 2.2 requires at least 4.5:1 for normal body text (AA), 3:1 for large text (18pt+ or 14pt bold) and 7:1 for the enhanced AAA level. Non-text UI components need at least 3:1. Omni Color's contrast checker reports all of these plus APCA Lc guidance.
Is Omni Color free?
Yes. Every tool is free to use, requires no account, and runs entirely in your browser. Recent colors and favorites are stored only on your device using localStorage.
Does it work offline?
Yes. Omni Color is a Progressive Web App. After your first visit the essential color tools are cached, and the picker, converter, palette generator and contrast checker continue working without a connection.
Do you upload my images?
No. The image color picker processes images entirely in your browser using the HTML canvas API. Your images never leave your device.