Color, accurately, across every device
A working colorist’s toolkit: convert between HEX, RGB, HSL, HSV and CMYK; check WCAG 2.1 contrast at the AA and AAA thresholds; preview a palette on a phone, tablet, or smart TV from one short URL. Built for the case where the screen in front of you is not the screen the work will live on.
Color Picker
Pick a color and see it converted to different formats
Color Palette
💡 Click on any color value below to copy it to clipboard
Running Number
16,729,943
HEX
#FF4757
RGB
255, 71, 87
HSL
354°,100%,64%
HSV
354°,72%,100%
CMYK
0%,72%,66%,0%
Why the format you pick changes the color
The same numeric triplet can land on a different color depending on whether the receiving surface treats it as sRGB, Display-P3, or Adobe RGB. The difference is not academic: P3 covers roughly 25% more area than sRGB, mostly in the reds and greens, so a saturated red picked in P3 (saycolor(display-p3 1 0 0)) will look measurably duller when a browser falls back to sRGB on a non-wide-gamut display. Most CSS authoring still pretends sRGB is the only color space, which is fine until your designer is on a 2022+ MacBook and your customer is on a 2017 office monitor.
HSL is the format to reach for when you are reasoning about lightness and want a complementary or analogous variant in your head — rotate the hue 180°, keep saturation and lightness, done. HSV is the format image editors expose because it matches the rectangle-and-slider picker UI; HSV's “value” is not the same as HSL's “lightness”, and confusing the two is one of the most common bugs in color manipulation code.
CMYK is a print-process model, not a display model. The conversion from any RGB to CMYK is gamut-mapped and lossy: vivid blues and oranges shift visibly, and the press operator's ICC profile makes the final call. If you are designing for print, design in your printer's profile from the start, not as a final-step CMYK conversion. Our CMYK guide walks through the typical drift on common Pantone matches.
WCAG contrast, in numbers a designer can use
WCAG 2.1 specifies 4.5:1 for normal text and 3:1 for large text at AA, and 7:1 / 4.5:1 at AAA. The contrast formula is non-obvious: it's computed in linear-RGB luminance, not sRGB-space brightness, so two colors that look similarly bright can score very differently.
A common trap: brand reds. #FF4757 on white passes at 3.84:1 — large text only. The same red on black scores 5.46:1, AA-large but not AA-normal. To pass AA for body text on a red-tinted card, you typically need to darken the red toward#C9303D or lighter. The contrast checker shows the threshold each pairing clears in real time, and every named-color page ships with both ratios pre-computed.
Color-vision deficiency is the second axis. Roughly 8% of men and 0.5% of women have some form of red-green color confusion. If your status-color system uses red for error and green for success without a secondary cue (icon, position, label), about one in twelve male users can't tell them apart at a glance. Our cross-device test surface includes a Brettel/Vienot CVD simulation for protanopia, deuteranopia, and tritanopia, run in linear-RGB so the result is faithful rather than the per-channel approximation most simulators use.
One short URL, every screen
The hardest part of choosing a color isn't picking it — it's checking how it will look on the screen the work will actually live on. An OLED phone, an LCD tablet, a 2018 office display, and a smart TV will each render the same hex differently. The cross-device testencodes a single color or a palette of up to 8 into a short URL like /d/ff4757 or /d/ff4757-2ed573-3742fa, renders fullscreen with overlay metadata, and includes a QR code so you can hand the same URL from one device to the next without sign-up.
The on-screen overlay shows the active hex, RGB, HSL, the nearest CSS named color, the contrast ratio against black/white with the WCAG label, and detected color gamut + HDR support reported by the browser. Reference patches at −10/−5/0/+5/+10 lightness make perceptual-shift comparison across devices direct. Smart TVs work via arrow-key palette cycling and Enter to toggle the overlay.