Color Picker & Converter
Pick any color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Check WCAG contrast ratios and copy CSS-ready values with one click.
background-color: #6366f1;color: rgb(99, 102, 241);color: hsl(239, 84%, 67%);TL;DR
Pick a color above to read it in every model at once. HEX and RGB describe the exact same number — three channels of 0–255, just written in base‑16 versus base‑10. HSL and HSV reshape those numbers into hue/saturation/lightness so you can tweak one knob at a time. The contrast panel computes the WCAG ratio from relative luminance, not from how different the colors look — that is why a bright yellow on white can fail even though it "looks" distinct. Aim for 4.5:1 for body text (AA) and 7:1 for AAA. Everything runs in your browser; no color you pick is ever sent anywhere.
Color model cheat sheet: what each format actually stores
All five formats below describe colors inside the same sRGB gamut your screen renders. The difference is how the numbers are arranged and which workflow they suit. Here is the same orange — #FF6432— expressed in each model so you can see the relationship.
| Model | Channels & range | #FF6432 as | Best for |
|---|---|---|---|
| HEX | RR GG BB, base‑16, 00–FF each | #FF6432 | CSS, HTML, design handoff |
| RGB | R G B, 0–255 each | rgb(255, 100, 50) | Screens, canvas, image code |
| HSL | H 0–360°, S 0–100%, L 0–100% | hsl(15, 100%, 60%) | Theming, hover/active states |
| HSB / HSV | H 0–360°, S 0–100%, B 0–100% | hsb(15, 80%, 100%) | Figma, Photoshop, picking |
| CMYK | C M Y K, 0–100% each | 0, 61, 80, 0 | Print (approximate, no ICC) |
Notice HSL lightness is 60% but HSV brightness is 100% for the identical color — that single difference trips up most people moving between CSS and Figma. See the FAQ below for why.
HEX to RGB by hand (and the shorthand trap)
A HEX code is just three base‑16 numbers glued together. Each pair is one channel. To convert a pair to decimal, multiply the first digit by 16 and add the second (where A=10, B=11, … F=15):
#FF6432 └┬┘└┬┘└┬┘ R G B FF = (15 × 16) + 15 = 255 64 = ( 6 × 16) + 4 = 100 32 = ( 3 × 16) + 2 = 50 → rgb(255, 100, 50)
Going the other way, divide each channel by 16: the quotient is the first hex digit, the remainder is the second. The number 100 → 100 ÷ 16 = 6 remainder 4 → 64.
The shorthand trap: 3‑digit HEX like #F63 is not the same as the first three digits of #FF6432. CSS expands each digit by duplicating it, so #F63 means #FF6633, not #F60030. The same applies to 4‑digit (#F63A → #FF6633AA) and 8‑digit HEX, where the last pair is the alpha channel.
WCAG contrast requirements at a glance
The contrast checker above compares the relative luminance of your color against pure white and pure black, then reports the ratio. WCAG 2.x sets different thresholds depending on text size and the conformance level you target. "Large text" means at least 18.66px bold or 24px regular (14pt bold / 18pt regular).
| Content | AA (min) | AAA (enhanced) | WCAG rule |
|---|---|---|---|
| Normal text (< 18pt / 14pt bold) | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text (≥ 18pt / 14pt bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI components & graphics | 3:1 | — | 1.4.11 |
| Disabled / decorative text | No requirement | No requirement | 1.4.3 exception |
The ratio itself ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). It is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 the darker. Because luminance is gamma-corrected, two colors that differ only in hue but share lightness can have a contrast ratio close to 1:1 — which is exactly why color alone should never be the only way you convey meaning.
Choosing a text color that passes, the practical way
Start from the background, not the text. Pick your background color above and read both contrast figures (vs. white text and vs. black text). Whichever already passes 4.5:1 is your safe foreground. Most light backgrounds want black text; most dark backgrounds want white.
If neither passes, adjust lightness in HSL.Switch to the HSL field and move the L value — hue and saturation stay locked, so your brand color keeps its identity while it gets darker or lighter. Re-check the ratio after each step. This is far more controllable than nudging RGB channels.
Watch the "looks fine" failures. Yellow (#FFD800) on white reads as obviously yellow but scores about 1.39:1 — it fails everything. Mid-grey (#767676) on white is the lowest grey that still passes AA at 4.54:1; anything lighter fails for body text.
Large headings get a discount.A color that fails 4.5:1 may still pass at 3:1 for large text, so you can use a slightly lighter brand color for big display type than for paragraphs — just keep paragraph text at 4.5:1 or better.
Questions people ask about color conversion
Why does the same color show 60% lightness in HSL but 100% brightness in HSV?
They measure different things. HSV brightness asks "how close is this to the most vivid version of the hue?" — a fully saturated, pure color is 100% brightness. HSL lightness asks "how close is this to white?" — a pure color sits at 50–60% because white is still above it. That is why CSS (HSL) and Figma (HSV) report different third numbers for the identical pixel. The HEX and RGB values always match across both.
Is #F63 the same as #FF6432?
No. CSS 3‑digit shorthand expands by duplicating each digit, so #F63 becomes #FF6633 — not the first six characters of a longer code. Only colors where each channel happens to be a repeated digit (like #FF6633) can be safely shortened. When in doubt, use the full 6‑digit form.
Why doesn't my CMYK value print exactly like it looks on screen?
Screens emit light (additive RGB) and printers absorb it with ink (subtractive CMYK), and the two gamuts don't fully overlap — bright RGB greens and oranges have no exact CMYK equivalent. The conversion here is a standard naive formula with no ICC profile, so treat it as a starting point. For production print, get a proof from your printer using their specific paper and press profile.
What contrast ratio do I actually need to pass?
For WCAG 2 Level AA — the standard most laws and audits reference — you need 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) and for interactive UI elements. AAA raises those to 7:1 and 4.5:1. If you only remember one number, remember 4.5:1.
Does the contrast checker account for opacity or background images?
No. WCAG ratios are defined between two solid colors. If your text sits on a semi-transparent layer or a photo, the effective background changes pixel by pixel, and a single ratio can't describe it. Composite the actual rendered background color first (flatten the layers), then paste that solid color here to check it.
Are my picked colors sent anywhere?
No. This is a static site with no backend. Every conversion, the contrast math, and the recent-colors history all run in your browser's JavaScript engine and stay on your machine. You can confirm it in DevTools → Network: picking and converting colors triggers zero outbound requests.