Seletor de Cor de Imagem

Pick colors from any image

100% gratuito. Funciona totalmente no seu navegador: seus arquivos e dados nunca saem do seu dispositivo e nada é enviado para nenhum servidor.

cloud_upload

Arraste e solte arquivos aqui

ou procurar para enviar

Supports PNG, JPG, WebP

Processado no seu navegador - seu arquivo nunca sai deste dispositivo.

Jump to the next useful tool without leaving your flow.

See more

Sobre esta ferramenta

Clicking a pixel and reading back its exact value solves a problem that guessing never will: matching a colour precisely. A brand blue that is one shade off looks wrong in a way people notice without being able to say why, and no amount of eyeballing a screenshot gets you the right hex code. This tool reads the actual pixel data, so what you get is what is genuinely in the image. The three formats it returns serve different purposes. HEX (#6366f1) is the compact form used almost everywhere in CSS and design tools. RGB expresses the same colour as red, green and blue channels from 0-255, which is what you need when a value has to be calculated or animated. HSL describes hue, saturation and lightness, and is far more useful when you want to build a palette - taking one colour and generating a lighter or more muted version means changing a single number rather than guessing three. Images are read in your browser and never uploaded.

Como usar esta ferramenta

  1. Upload your imageDrop in a screenshot, logo, mockup or photo. It is read locally and not sent anywhere.
  2. Click the colour you wantThe pixel under your cursor is sampled and its values shown immediately in HEX, RGB and HSL.
  3. Copy the format you needHEX for CSS and design tools, RGB for code that manipulates channels, HSL for building variations.
  4. Sample as many points as you likeClick around the image to compare shades - useful when a gradient or compression makes one region differ from another.

Por que usar

  • Reads real pixel values rather than approximating, so brand colours match exactly.
  • Three formats at once, so you do not need a separate converter.
  • Runs in your browser - unreleased designs and client mockups never leave your device.
  • Sample repeatedly to compare regions, which reveals gradients and compression artefacts.
  • No account and no upload limit.

Usos comuns

  • Extracting a brand colour from a logo when no style guide is available.
  • Matching a colour from a design mockup while building the page.
  • Identifying the exact shade used in a screenshot of another site or app.
  • Building a palette from a photograph for a presentation or moodboard.
  • Checking whether two areas that look identical actually share the same value.

Dicas para melhores resultados

  • Sample from a PNG rather than a JPG where possible. JPG compression shifts colours slightly, especially near edges.
  • Click several nearby points on what looks like a flat area - if the values differ, you are looking at a gradient or compression noise.
  • Use HSL when you need a lighter or darker variant of a colour. Adjusting one lightness number is far more predictable than editing three RGB channels.
  • A colour picked from a photograph is affected by lighting and white balance, so it is the colour in that image, not the colour of the physical object.
  • Once you have a colour, check it against its background with the Colour Contrast Checker before using it for text.

Erros a evitar

  • Sampling from a heavily compressed JPG and treating the result as the exact brand colour.
  • Picking from a screenshot that has a filter, night mode or colour profile applied, which shifts every value.
  • Assuming one sample represents a whole region when the area is subtly gradient-filled.
  • Using a picked colour for text without checking contrast, which is the most common accessibility failure on the web.
  • Sampling a photograph of a printed item and expecting a match - print and screen colour spaces differ fundamentally.

Formatos compatíveis

  • JPG
  • PNG
  • WebP
  • GIF

Opções disponíveis

  • Eyedropper sample
  • HEX
  • RGB
  • HSL

Perguntas frequentes

It reads the exact pixel value at the point you click, so it's as accurate as the image itself - keep in mind that heavy JPG compression or screen photos of physical objects can shift colors slightly from the "true" real-world color.

Typically HEX (like #6366f1), RGB, and HSL - covering the formats most design and code tools expect.

Yes - click as many points on the image as you need; each click gives you that pixel's color values.

Same tool - "colour picker" is the British spelling and "color picker" the American one. HEX, RGB and HSL values are identical either way, and CSS itself only accepts the American spelling for properties like `color` and `background-color`, which is worth remembering when you paste a value into a stylesheet.

They describe the same colour three ways. HEX is a compact six-digit form used across CSS and design tools. RGB gives the red, green and blue channels as 0-255 values, which suits code that calculates or animates colour. HSL gives hue, saturation and lightness, which is the practical choice for making a lighter or more muted variant - you change one number instead of three.

No. The image is read by your browser and sampled locally, so unreleased designs and client work never leave your device.

Either the area is a subtle gradient rather than flat, or JPG compression has shifted nearby pixels. Sampling a few points quickly tells you which. PNG sources avoid the compression issue entirely.

Use the Colour Palette tool, which extracts the dominant colours from an image automatically rather than asking you to sample each one by hand.

As pessoas também pesquisam

  • color picker from image
  • colour picker online free
  • get hex code from image
  • eyedropper tool online
  • find brand colour from logo
  • rgb to hex from photo
  • image color identifier

Related guides