Color Picker from Image

HEX (hexadecimal) is the most common color format for web design. A HEX code like #FF5733 represents red, green and blue values in base-16. Use HEX in CSS, HTML, Photoshop, Figma, and most design tools. It’s the universal color language of the web.

RGB stands for Red, Green, Blue — the same information as HEX but written as three decimal numbers from 0 to 255. For example, rgb(255, 87, 51) is the same color as #FF5733. RGB is preferred in CSS when you need to use opacity (e.g. rgba(255, 87, 51, 0.5)) or when working in video/print design software.

HSL stands for Hue, Saturation, Lightness. It’s a more intuitive way to describe colors — Hue is the color angle (0–360°), Saturation is how vivid it is (0–100%), and Lightness is how light or dark it is (0–100%). HSL is great in CSS when you want to create color variations: simply adjust the lightness to get tints and shades of the same hue.

After clicking the image to pick a color, click “Save to Palette” to add it to your saved colors below. You can build up a palette of colors by picking multiple spots on the image. Click any palette swatch to restore that color in the display. This is useful for extracting a brand’s full color palette from a logo or design file.

A few reasons: (1) JPEG compression alters pixel colors slightly from the original, so flat color areas may not be perfectly uniform. (2) Screen calibration — your monitor’s color profile affects how colors appear. (3) Anti-aliasing — on edges and gradients, pixels are blended, so clicking near an edge gives a mixed color. For the most accurate results, click on a flat, solid-colored area away from edges.