Pick any color from a gradient, an image, or just type a value — and get Hex, RGB, HSL, OKLCH, and CSS instantly. Built for designers, developers, and anyone who's ever stared at a color and thought "I just need the code."
Click to upload an image or drag & drop it here
PNG, JPG, GIF, WebP — click anywhere on the image to pick a colorYour image stays on your device — nothing is uploaded to our servers.
This is how your body text looks at this color combination. Good contrast makes reading easy and accessible for everyone, including people with low vision.
AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal, 4.5:1 for large.
I've used a lot of color tools over the years. Most of them do one thing: show you a gradient, you click, you get a hex code. That's fine for quick grabs, but real design work needs more. That's why we built this one differently.
The main picker uses the classic SV (saturation/value) gradient panel with a separate hue slider — the same layout you know from Photoshop, Figma, and every serious design tool. No relearning required.
Upload a photo, screenshot, or brand asset and click any pixel to extract its exact color. Your image never leaves your device — all processing happens locally in your browser. Zero privacy concerns.
Generate 5-color palettes in one click. Choose from analogous, monochromatic, triadic, complementary, or random schemes. Every color comes with its hex, RGB, and HSL values ready to copy.
Paste two colors and instantly see if they pass WCAG AA or AAA accessibility standards. Includes separate checks for normal text, large text, and UI components so you can ship accessible designs confidently.
Every color you pick shows up in Hex, RGB, HSL, OKLCH, and ready-to-paste CSS simultaneously. No switching between tabs or converting manually — it's all there at once.
Pick two colors, choose a direction, and get a ready-to-use CSS linear-gradient code. Quickest way to generate background gradients for buttons, hero sections, or any UI element.
For any color you select, see complementary, analogous, triadic, split-complementary, tetradic, and monochromatic harmonies. Click any swatch to copy it or load it into the picker.
The dedicated alpha slider lets you set transparency from 0 to 100%. Output automatically switches to rgba() and hsla() when opacity is below 100%, so you can paste straight into CSS.
No tutorial needed — but here's a quick walkthrough in case you want to get the most out of every feature.
The main gradient panel shows the full range of saturation (left to right) and brightness (top to bottom) for whichever hue you've selected. Click anywhere on it to set your color. Drag to refine it. The white circle shows your current position.
The rainbow bar below the canvas is the hue slider. Drag it left or right to shift through the color spectrum — red, orange, yellow, green, cyan, blue, purple, and back to red. This changes which color family the gradient panel shows.
The second slider controls transparency. 100% is fully opaque (solid). 0% is invisible. When you're below 100%, the output values switch to rgba() and hsla() automatically, so you can paste them straight into CSS.
Every format — Hex, RGB, HSL, OKLCH, CSS — is shown in the panel on the right. Click the copy icon next to any row to grab it, or click the preview bar at the bottom to copy the hex code. A toast message confirms the copy.
Already know your color? Type a hex code like #3498db directly into the Hex field and press Enter. The picker updates to show that color and gives you all the other formats instantly.
Change the harmony dropdown to see color combinations that work well with your pick. Use Lighten, Darken, and Saturate buttons to make quick adjustments. Hit Random to discover unexpected color starting points.
If you've worked on any web project, you've probably copied a hex code without thinking much about what it actually means. That's fine — hex codes work great and most tools accept them. But knowing what's behind the code gives you real control over your colors, especially when you need to make adjustments programmatically or explain a color decision to a client.
A hex color like #E8400A is really three separate numbers written back-to-back: E8 (red), 40 (green), and 0A (blue). Each pair is a hexadecimal number — base 16 instead of base 10 — so it goes from 00 (zero) to FF (255). That gives you 256 possible values per channel and 16.7 million combinations total. The # at the start is just a flag telling the browser "this is a hex color value."
Short hex codes like #F60 are shorthand for #FF6600 — each character gets doubled. You'll see this in older CSS. Modern code usually uses the full six-character version for clarity.
#FF, your red channel is maxed out. If it ends with FF, blue is maxed. White is #FFFFFF (all channels at 255), black is #000000 (all channels at 0). Once that clicks, reading hex codes gets a lot easier.rgb(232, 64, 10) says the same thing as #E8400A — 232 red, 64 green, 10 blue. The decimal format is more intuitive for humans. When you need to add transparency, you use rgba(232, 64, 10, 0.5) where the fourth value is opacity from 0 to 1. This is useful for overlays, shadows, and any element that needs to show through.
One practical advantage of RGB over hex: it's much easier to adjust. If a color looks too yellow and you want to reduce the green, you can just lower the G value. With hex you'd need to convert first.
HSL is my personal favourite format for writing CSS from scratch. hsl(16, 92%, 48%) breaks down as: hue 16° (an orange-red on the color wheel), saturation 92% (very vivid), lightness 48% (close to middle brightness). Want a lighter version? Change 48% to 65%. Want a softer, more muted tone? Drop the saturation to 50%. These tweaks are intuitive in a way that hex never is.
HSL also makes color scales easy to build in CSS. A consistent set of grays with hsl(0, 0%, 10%) through hsl(0, 0%, 95%) is much more maintainable than a list of random hex codes.
OKLCH is newer and you won't need it for most projects right now, but it's worth understanding because it solves a real problem: colors that look equally bright to your eyes don't always have equal lightness values in RGB or HSL. OKLCH uses a perceptually uniform model — if you change the lightness value, the brightness change you see matches what the number says. Design systems at companies like Radix and Tailwind are starting to build their palettes in OKLCH. Our picker shows the OKLCH value for reference so you're ready when the ecosystem catches up.
After using dozens of color tools, I've noticed what separates the ones people keep bookmarked from the ones they try once and forget. It's not complexity — it's usefulness per interaction.
The best tools get you from "I need a color" to "I have the code I need" in as few steps as possible. That means: the picker opens already doing something useful (not blank), every value is visible without extra clicks, and copying is one action — not three. It also means the tool handles real use cases: picking from an image, checking accessibility, building a palette — not just the single-color-in-a-vacuum scenario.
Color pickers aren't just for web designers. Here's who reaches for one and what they're actually doing with it.
Matching brand colors to pixel-perfect specs, building accessible color systems, and testing whether button and background combos pass WCAG before handing designs to developers.
Translating design tokens into CSS, converting between formats when libraries expect different inputs, and quickly checking what a hex code looks like before hardcoding it.
Extracting dominant colors from photos to build cohesive color stories, matching print and screen colors, and creating mood boards from reference images.
Finding the exact hex code for their logo color to use consistently across their website, social media graphics, and print materials — without needing to open Photoshop.
Understanding how RGB and hex values work, experimenting with color theory through the harmony tool, and completing design or web development assignments.
Building UI themes, generating gradient backgrounds, and ensuring color contrast meets accessibility requirements for mobile interfaces used in varying lighting conditions.
Things worth knowing that most color picker guides don't mention.
When building a UI color palette, most designers pick hues first and adjust later. The opposite works better: decide your lightness scale first, then apply hues. This makes your palette feel systematic rather than arbitrary.
Screens vary wildly. A color that looks perfect on your MacBook Pro's P3 display can look washed out or oversaturated on a standard sRGB monitor. Always check your final palette on at least one other screen before shipping.
Hex is fine for static colors. But if you're setting colors in CSS custom properties, HSL is far easier to adjust and reason about. hsl(220, 90%, 56%) is immediately legible in a way #1a6efc just isn't.
It's easy to pick a gorgeous color combination and only discover at the end that it fails WCAG AA for body text. Run it through the Contrast Checker tab early.
Complementary colors sit opposite each other — high contrast, great for CTAs. Analogous colors are neighbors — cohesive, good for backgrounds. Triadic uses three evenly spaced colors — vibrant but harder to balance. Monochromatic is one hue at different lightness levels — safe and elegant.
Got a hex from a Figma file or brand guide? Just type it directly into the Hex field and press Enter. The picker will jump to that color and give you all the other formats — RGB, HSL, OKLCH — right away.
Which format should you actually use? Here's a quick reference.
| Format | Example | Supports Alpha | Human Readable | CSS Support | Best For |
|---|---|---|---|---|---|
| Hex | #E8400A | ✓ (#RRGGBBAA) | ✗ Not intuitive | ✓ Universal | Default for HTML/CSS |
| RGB | rgb(232,64,10) | ✓ rgba() | Moderate | ✓ Universal | Transparency, JS canvas |
| HSL | hsl(16,92%,48%) | ✓ hsla() | ✓ Very intuitive | ✓ Universal | CSS variables, design systems |
| OKLCH | oklch(65% .21 33) | ✓ | Moderate | Modern browsers only | Perceptual color scales |
| CSS Name | tomato | ✗ | ✓ Very readable | ✓ Universal | Prototyping, quick tests |
Real questions from real users — answered without the fluff.
background: linear-gradient(to right, #E8400A, #FFD700); which works in any modern browser without any prefixes needed. Click the copy button next to the code and paste it directly into your stylesheet.