Color Picker from Image & Converter

HEX (#3b82f6) is a compact hexadecimal representation of RGB values, widely used in CSS and design tools. RGB (rgb(59, 130, 246)) expresses a color as red, green and blue components each ranging 0–255, closer to how screens physically emit light. HSL (hsl(217, 91%, 60%)) describes a color as hue (0–360°, the color wheel angle), saturation (0–100%, how vivid), and lightness (0–100%, how light or dark). HSL is the most intuitive for humans — to make a color lighter, just increase L; to desaturate it, decrease S.

All three are valid in CSS. HEX is the most common for static colors and is the shortest to type. RGB is useful when you need to manipulate channels programmatically or add opacity (rgba()). HSL is best when you need to create color variations — for example, generating a hover state by adjusting lightness: hsl(217, 91%, 50%) → hsl(217, 91%, 40%). Modern CSS also supports color-mix() and oklch() for more perceptually uniform manipulation, but HEX/RGB/HSL cover the vast majority of real-world use cases.

3-digit HEX is a shorthand where each digit is doubled: #3bf is equivalent to #33bbff. It only works when both digits of each color channel are identical. 3-digit HEX reduces file size slightly but is only applicable to a subset of colors. 6-digit HEX can represent all 16,777,216 possible RGB colors. An 8-digit HEX (#RRGGBBAA) adds an alpha channel for transparency, supported in all modern browsers.

Hue represents an angle on the color wheel, which is circular — so 0° and 360° are the same point (red). The wheel goes: 0°/360° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta. This circularity is what makes HSL useful for generating color harmonies: complementary colors are 180° apart, triadic colors are 120° apart, and you can rotate the hue to create analogous palettes without touching saturation or lightness.

Rounding. The conversion from RGB to HSL involves floating-point arithmetic, and rounding the HSL values to integers (e.g., H=217, S=91, L=60) loses some precision. Converting back from those rounded integers to RGB and then to HEX can produce a result 1 unit off in one channel. This is normal and the color difference is imperceptible to the human eye. If you need lossless round-tripping, keep the full floating-point HSL values without rounding.

Use the 'Pick from Image' section on this page. Upload any image by dragging it onto the drop zone or clicking to browse. Once loaded, hover over any pixel to preview its HEX and RGB values in real time. Click the pixel to instantly populate all converter fields — HEX, RGB, RGBA, HSL, HSLA and CSS variables are all updated at once. Everything runs in your browser using the Canvas API; your image is never uploaded to any server.

Yes. Upload the screenshot or photo using the 'Pick from Image' section, then click the exact pixel you want. You'll get the precise HEX, RGB and HSL values for that pixel. This is useful for matching brand colors from a logo, sampling colors from a design mockup, or identifying colors in any image without needing Photoshop or a desktop eyedropper tool.

A browser eyedropper (like the EyeDropper API in Chrome) samples any pixel currently visible on your screen — including UI outside the browser. A color picker from image works entirely within an uploaded file: you load the image, then click pixels on the canvas to read their exact color data. The image-based approach is more precise for design work because it reads the raw pixel values without being affected by monitor calibration, screen gamma, or OS color profiles.