ColorPicker converts colors between all common formats and shows every value a developer usually needs: contrast ratios, WCAG levels, relative luminance, CSS color names and ready-to-copy code. Everything runs in your browser - no data is sent to a server.
Use the square to choose saturation and brightness, the hue slider for the color family and the alpha slider for transparency. Clicking any swatch, preset or recent color loads it. The small color button next to the input opens the operating system picker if you prefer it.
The text field understands #4f8cff, #4f8c, #4f8cff80, rgb(79, 140, 255), rgba(79, 140, 255, 0.5), hsl(217, 100%, 65%), hsv(...), hwb(...), cmyk(...), lab(...), lch(...), oklab(...), oklch(...) and all CSS color names such as rebeccapurple. Short HEX with three or four digits works too.
The Formats table lists the color in HEX, HEXA, RGB(A), HSL(A), HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH plus code snippets for Tailwind, Swift and Android. Every row has a copy button, and Copy all puts the whole list on the clipboard.
The Contrast section shows the WCAG 2.2 contrast ratio against pure white and pure black, labelled AAA (7:1), AA (4.5:1), AA18 (3:1, large text only) or fail. The APCA values (Lc) show the modern perception-based model that is expected to replace the old ratios in WCAG 3. The app also names the best readable text color for backgrounds.
Color information shows HSL, HSV, OKLCH, the relative luminance in percent, the exact CSS color name if the value matches one, and the nearest named CSS color including the Lab distance.
Color harmonies derives complementary, triadic, analogous, split-complementary, tetradic and monochromatic variants. Shades and tints build a lightness ramp from 95% to 0%, and the mix variants blend the color with white or black. Every swatch can be clicked to make it the active color.