Birač boja sa slike

Pick any color from an image — HEX, RGB and HSL

This free image color picker turns any picture into a clickable color source: drop in a photo, screenshot or logo (or paste it with Ctrl+V), hover to see a magnified pixel loupe, and click to get the exact HEX code, RGB and HSL values — copied to your clipboard instantly. A pick history collects your last 16 colors so you can sample several shades from one image.

The image is read by your browser's canvas API and never sent anywhere. That makes it safe for unpublished designs, client logos, and sensitive work — unlike imagecolorpicker.com, which uploads your file to a server. No sign-up, no account, no ads interrupting your workflow.

A magnifier loupe for pixel-perfect picks

Clicking the right pixel matters — anti-aliased edges, gradients, and text are full of in-between shades. The hover loupe magnifies the pixels around your cursor with a crosshair on the exact one you're about to sample, so you can get the color from an image precisely: the flat fill of a button rather than its blurred edge, the solid area of a logo rather than a JPEG compression artifact.

Images are kept at full pixel fidelity (large photos scale only for display), and every value updates live as you move. Click, and the hex is on your clipboard.

Automatic color palette extraction

Alongside single-pixel picking, the tool extracts the image's dominant color palette automatically — eight swatches ranked by how much of the image they cover, each labeled with its hex code. It's the fastest way to turn a photo into a color scheme: brand moodboards, web themes from a hero image, interior palettes from an inspiration photo.

The extraction quantizes pixels into clusters and averages each cluster, so the swatches represent the image's real character rather than outlier pixels. Click any swatch to copy it, or 'Copy all' for a comma-separated list ready to paste into CSS variables, a design doc, or notes.

Pick from your screen with the EyeDropper API

Need a color that isn't in a saved image — a live website, another app, a video frame? The Pick from screen button opens your browser's native EyeDropper (Chrome and Edge), letting you sample any pixel anywhere on your display. The picked color lands in the same HEX/RGB/HSL panel and history as image picks.

On browsers without the API (Safari, Firefox), the paste workflow covers the gap: press PrtScn (or Cmd+Shift+4 on Mac), then Ctrl+V directly into this page — no need to save the screenshot first. This pattern also works for sampling from PDFs open in the browser or video frames.

How this compares to imagecolorpicker.com, Adobe Color, and Canva

imagecolorpicker.com is the most popular alternative and offers a similar feature set, but it uploads your image to a server on every use and runs ads. Adobe Color extracts palettes from photos but requires an Adobe account, sends images to Adobe's servers, and doesn't offer single-pixel picking with a zoom loupe — it's a palette tool, not an eyedropper. Adobe's paid tools (Photoshop, Illustrator) do offer precise eyedropper picking but require subscriptions starting around $20/month.

Canva's color picker only works on images already in a Canva project. macOS Digital Color Meter and Windows PowerToys Color Picker are screen-level tools that work anywhere on the desktop but don't extract palettes from files. Coolors.co can generate palettes from images but sends files to its server. This tool combines a zoom loupe, palette extraction, screen eyedropper, 16-color history, HEX/RGB/HSL output, and copy-on-click — all client-side, free, and without ads.

Built for designers and developers

Every output is one click from your clipboard in the format you ship: HEX for CSS and Tailwind, RGB for canvas and code, HSL for systematic palette tweaking. Found a brand color? UtiloKit's companion tools take it further — check it against text colors in the Contrast Checker, build harmonies in the Color Palette Generator, or blend it in the Color Mixer.

Because the whole tool is client-side, it loads fast, works offline once open, and never holds your images hostage to an ad impression. Drop, click, copy — that's the entire workflow. On mobile, tap to sample a pixel and pinch-zoom first if you need to hit a precise spot on a dense image.

Color models explained: RGB, HSL, HSV, and beyond

RGB is an additive color model — it simulates light. When all three channels are 0 you get pure black (no light), and when all are 255 you get white (full intensity on every channel). This is the native model for screens and the one the browser canvas exposes. CMYK is the opposite: a subtractive model for ink, where 0,0,0,0 is white paper and 0,0,0,100 (100% black ink) is black. When you pick a web color and need to hand it to a print shop, converting to CMYK correctly requires a color-managed workflow — not a simple formula — because ink on paper and light from a screen cover different gamuts.

HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) re-expresses the same RGB point in a form that matches how designers think. Lightness 50% is a 'pure' color; raise it for a tint, lower it for a shade, without touching the hue. HSV/HSB (Hue, Saturation, Value/Brightness) uses the same hue axis but replaces Lightness with Value — where Value 100% is the most vivid form of a hue (not white). Photoshop's color picker uses HSB; CSS uses HSL. The difference is subtle but matters when you're building systematic palettes: HSL's 50% lightness center keeps hues perceptually comparable, while HSB's value axis compresses the palette toward black at the low end.

For advanced work there are perceptually uniform models. LAB (CIELAB) is designed so that equal numeric steps look like equal visual steps to human eyes — unlike RGB, where a jump from 200 to 210 in the blue channel looks smaller than the same jump in the green channel. LAB is used in image processing, color science, and the Delta E (ΔE) metric for measuring how different two colors look: ΔE below 1 is imperceptible to most people, ΔE 1–2 is detectable only by trained observers, and ΔE above 10 is a clearly noticeable difference. OKLCH is the modern successor for web work — it brings perceptual uniformity to CSS via the oklch() function in CSS Color Level 4, letting you step through lightness or chroma in even intervals that look even on screen.

How canvas-based color picking works under the hood

When you load an image into this tool, it is drawn onto an invisible HTML Canvas element at its native pixel dimensions. Clicking calls ctx.getImageData(x, y, 1, 1), which returns a four-element RGBA pixel array — red, green, blue, and alpha, each as an integer from 0 to 255. To read any arbitrary pixel from a larger canvas read-back, the index into the flat Uint8ClampedArray returned by getImageData follows the formula: index = (y × imageWidth + x) × 4. The four values at that offset are R, G, B, and A. Converting to HEX is a matter of formatting each channel as a two-digit hexadecimal string and concatenating them: # + each channel zero-padded to two hex digits.

Anti-aliasing is why picking from an edge can be misleading. When a browser or image editor renders text or a shape, pixels at the boundary are blended between the foreground color and whatever is behind it — producing intermediate values. A letter edge pixel that looks 'red' might actually be rgb(210, 120, 110): part red fill, part white background, blended together. The zoom loupe in this tool magnifies the pixel grid so you can see these in-between pixels clearly and click the solid fill area instead of a blended edge pixel.

The EyeDropper Web API, available in Chrome 95+ and Edge, goes further than canvas: it samples any pixel on your entire display — other browser tabs, native apps, video players. It returns a sRGBHex string via a promise-based interface. Unlike the canvas approach, it does not require the color source to be loaded into the browser at all. Firefox and Safari do not yet support it, which is why the paste-a-screenshot fallback exists: the same canvas pixel-reading logic handles screenshot images once they land in the browser.

Color accuracy, gamut, and screen calibration

The same HEX value can look noticeably different across monitors because screens vary in their color gamut — the range of colors the hardware can physically produce — and in whether they are calibrated. sRGB is the standard web color space: a hex color written in CSS is assumed to be sRGB, and a well-calibrated sRGB display will reproduce it accurately. An uncalibrated monitor may show the same hex as too warm, too cool, or too vivid because its panel's native output hasn't been mapped to the sRGB reference.

Wide-gamut displays — those supporting the Display P3 color space, which covers roughly 26% more colors than sRGB — add another layer of complexity. A photo taken on an iPhone or shot in ProPhoto RAW can contain P3 colors that are outside the sRGB triangle entirely. When the browser renders that image and you pick a pixel, you get the sRGB-mapped value — which may be a clipped or shifted approximation of the true wide-gamut color. CSS Color Level 4 addresses this with the color(display-p3 r g b) function and the @media (color-gamut: p3) query, letting you serve P3 colors to capable screens. The canvas getImageData API always returns sRGB values, so HEX codes from this tool are always safe for web use — they represent exactly what the browser is rendering.

Delta E (ΔE) is the standard metric for measuring perceptual color difference. It is calculated in LAB space, where Euclidean distance between two LAB points correlates with how different humans perceive those colors. A ΔE below 1 is imperceptible to the naked eye; ΔE between 1 and 2 can be detected only by experienced observers under controlled conditions; ΔE above 2 is visible to most people in a side-by-side comparison; ΔE above 10 represents a clearly distinct color. This matters when comparing a pixel-picked color against an official brand value — a ΔE of 3 between your extracted hex and the Pantone reference may be invisible on screen but significant in print.

Accessibility of picked colors: contrast ratios and WCAG

Extracting a color from an image is only the first step — using that color in a UI means verifying that text placed on or near it remains readable. WCAG 2.1 defines minimum contrast ratios between foreground and background: 4.5:1 for normal-sized text at Level AA, 3:1 for large text (18pt+ or 14pt bold) at AA, and 7:1 for all text at the stricter Level AAA. The ratio is calculated from relative luminance — a weighted sum of the linearized R, G, and B channels (Y = 0.2126R + 0.7152G + 0.0722B, with each channel gamma-expanded first). Contrast is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.

Brand colors extracted from photos frequently fail these thresholds. A vibrant amber pulled from a sunset photo might look strong against white in a mood board but deliver only a 2.8:1 contrast ratio — fine for a decorative element, but failing for body text. The fix is usually to darken the hue for text use and reserve the original extracted color for backgrounds, borders, or icons. HSL makes this adjustment systematic: hold Hue and Saturation constant, then lower Lightness in steps until the contrast check passes. Lightness 35–40% is a common target range for vibrant hues that need to pass 4.5:1 against white.

Interactive elements add another requirement under WCAG 1.4.11 (Non-text Contrast): UI components like buttons, inputs, and focus rings need at least 3:1 contrast against adjacent colors — not just 4.5:1 for their label text. A brand teal that passes AA for text may still fail 3:1 against a white card background when used as a button border. After extracting a palette with this tool, paste the key HEX values into UtiloKit's Contrast Checker to validate every foreground/background pairing before committing the colors to your design system.