Image color picker, palette & contrast checker

Drop an image on the tool or click Browse to pick one. Once it loads, click anywhere on the image to sample the color at that exact pixel. Each click is added to a sampled-color list with HEX, RGB, and HSL values you can copy in one click.

No. The image is read directly in your browser through URL.createObjectURL and drawn onto a Canvas. Pixel data is read locally via the Canvas API. Nothing is uploaded, no filename or image bytes ever reach our server or analytics.

The tool downsamples the image on an offscreen canvas (long edge up to about 240 px so palette extraction stays fast on phones), buckets every visible pixel into a 4-bit-per-channel color histogram, sorts the buckets by pixel count, averages each bucket, and then removes near-identical shades. The most common color comes first.

The WCAG contrast ratio compares the relative luminance of two colors and reports a number between 1:1 (identical) and 21:1 (black on white). Higher means more contrast between text and background, which usually reads more legibly.

For normal text, WCAG 2.1 AA requires at least 4.5:1. For large text (roughly 18pt or 14pt bold and above), AA requires 3:1. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text.

Yes. Use the Copy CSS variables button to get a `:root { --color-1: #hex; ... }` block ready to paste into your stylesheet. The names are neutral (color-1, color-2, ...) so you can rename them to something semantic in your own code.

HEX (like #14213D) is a compact six-digit form of RGB, common in stylesheets. RGB expresses red, green, and blue on a 0-255 scale. HSL expresses hue (color wheel angle), saturation, and lightness, which is often more intuitive for adjusting a color. All three describe the same color.