Color Picker — HEX, RGB, HSL, OKLCH + Palette & Contrast
An all-in-one color tool for designers and developers. Pick colors, convert between HEX, RGB, HSL, OKLCH and CMYK, take a colour straight from a photo or anywhere on your screen, and generate beautiful color harmonies. Check any text colour against it for WCAG contrast and get the nearest shade that passes.
Each format exists for a different job. HEX is the compact form CSS and design tools pass around. RGB is the same information in decimal, and matters when you need an alpha channel. HSL is the one to reach for when you are building a palette, because adjusting lightness while holding hue and saturation gives you a coherent set of shades in a way that nudging hex digits never will. CMYK is for print, and the conversion is an approximation — a screen colour and an ink colour are physically different things.
How to use Color Picker
- Pick a colour — use the swatch, paste any CSS value (hex, rgb, hsl, oklch or a name), click a point in an uploaded image, or use Pick from screen in Chrome and Edge.
- Copy the format you need — HEX, RGB, HSL, OKLCH or CMYK, each with its own copy button.
- Build a palette — choose a harmony and click a swatch to copy it, or copy all five as CSS variables.
- Check contrast — set a text colour, read the ratio and the five WCAG results, and use the suggested shade if it fails.
Features
- Five formats — HEX, RGB, HSL, OKLCH and CMYK, read from whatever you paste.
- Pick from an image or the screen — Click a pixel in a photo (it stays on your device) or use the browser eyedropper.
- Palette generator — Monochromatic, analogous, complementary, triadic, split-complementary and tetradic.
- Contrast checker — WCAG AA and AAA for normal and large text and UI parts, with the nearest passing text colour.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL color formats?
These are different ways to communicate the same color to a screen. **HEX** (`#FF5733`) is a 6-character hexadecimal code most commonly used in HTML/CSS; it’s compact and easy to copy. **RGB** (`rgb(255, 87, 51)`) defines the exact mix of Red, Green, and Blue light from 0-255; it is the native language of digital screens. **HSL** (`hsl(14, 100%, 60%)`) describes Hue (position on the color wheel 0-360), Saturation, and Lightness; it is widely considered the smartest format for developers because it makes generating hover states (by tweaking lightness) mathematically simple.
How do I check if my color combination is visually accessible?
The Web Content Accessibility Guidelines (WCAG) dictate that text must have a minimum contrast ratio against its background so visually impaired users can read it. Normal text requires a **4.5:1** ratio, while large text (18pt+) requires a **3.0:1** ratio (AA standard). The strictest AAA standard requires a 7.0:1 ratio. The contrast checker on this page treats your picked colour as the background: set a text colour and it shows the ratio, the AA and AAA results, and the closest text colour that would pass.
What is a CMYK color and when do I actually need it?
While HEX, RGB, and HSL are for screens (which emit light), CMYK (Cyan, Magenta, Yellow, Key/Black) is specifically for physical printing (using ink). Screens can display vibrant neon colors that physical printers mathematically cannot reproduce. You only need to use CMYK if you are exporting a design — like a logo or business card — that will be sent to a physical printing press. If your work lives on the internet, stick to HEX/RGB/HSL.
Which format should I actually work in?
HSL when you are designing, because changing lightness alone produces a coherent tint and shade scale from one base colour. HEX or RGB when you are writing the values into code, since that is what tooling and design handoffs expect. Convert at the end rather than trying to reason about a palette in hex.
Why does my CMYK colour look different when printed?
Because screens emit light and ink absorbs it, so the two gamuts do not overlap fully. Bright saturated blues, greens, and oranges that a monitor produces easily are outside what CMYK ink can reproduce, and they come back duller. Treat any on-screen CMYK conversion as an estimate and check a physical proof for anything colour-critical.