Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL formats. Extract colors from images.
#6366F1rgb(99, 102, 241)hsl(239, 84%, 67%)cmyk(59%, 58%, 0%, 5%)Pick colors from a spectrum, a gradient canvas, or directly from an uploaded image, and see them in every common format at once: HEX, RGB(A), HSL(A), and CMYK. Useful for building a palette from a reference photo, matching a brand color across design systems, or converting between the format a client sent you and the one your code needs.
Every color format represents the same underlying pixel, but they're useful in different situations. HEX is compact and works everywhere on the web. RGB is the native format for displays and compositing. HSL is human-friendly — hue, saturation, lightness — so it's easier to tweak (making a color darker usually means dropping lightness rather than reasoning about RGB). CMYK is for print.
Extracting a color from an image is how most brand-color work begins. You have a screenshot, a photo, a mockup — you need the exact color in your code. This tool's eyedropper reads the actual pixel values, not an approximation, so what you get matches the source.
Alpha (transparency) is often the part people forget when converting. #FF0000 and rgba(255, 0, 0, 1) are the same opaque red, but #FF0000AA has 67% opacity — and many older tools silently strip the alpha channel. This tool keeps alpha in every format (#RRGGBBAA, rgba, hsla) so your transparencies round-trip cleanly.
- 1
Pick or paste a color
Use the visual picker, type a HEX code, or paste a color string in any format. The tool detects the format and parses it.
- 2
See every format
HEX, RGB, HSL, and CMYK representations update live. Copy any of them with one click.
- 3
Extract from an image
Upload a photo or mockup. Click anywhere on the canvas to grab the exact pixel color. The result updates across all formats.
- 4
Tune with sliders
Adjust hue, saturation, lightness, or alpha to make fine variations. Useful for building palettes or hover states.
Brand color matching
Extract the exact color from a logo or screenshot so your site matches the brand's intended design.
Palette building
Sample colors from a reference photo to build a cohesive palette for a UI or illustration.
Format conversion
Translate between HEX (web) and CMYK (print), or RGB (CSS) and HSL (Tailwind config) as needed.
Accessibility checks
Read color values and feed them into a contrast checker to confirm WCAG compliance for text.
Does HEX include alpha?
The classic #RRGGBB form is opaque. The 8-digit form #RRGGBBAA adds an alpha byte — for example #FF000080 is red at 50% opacity. Most modern browsers and tools support both.
Why does the CMYK output look off?
CMYK conversion on screen is an approximation — real CMYK output depends on the printer, ink, and paper. The values shown are a mathematical conversion, not a calibrated profile. For production print work, use your printer's ICC profile.
What's the difference between HSL and HSV?
Both use hue and saturation, but HSL's third channel is lightness (50% is pure color) while HSV's is value (100% is pure color). HSL is the standard on the web. HSV is more common in graphics software.
How do I pick a color from my screen?
This tool picks from an uploaded image. To pick from anywhere on your screen, most modern browsers expose an eyedropper via window.EyeDropper() — DevTools and some OS-level tools also work. Once you have the HEX code, paste it here to convert.
Why does the color look slightly different on another monitor?
Monitors vary in gamut and calibration. The same HEX code can look different on a cheap laptop screen versus a calibrated designer monitor. For critical color work, calibrate your display and work in a color-managed environment.