UTILYARD
tools / image

Selector de color desde imagen

Sube una imagen y haz clic en cualquier lugar para seleccionar un color. Obtén valores HEX, RGB y HSL al instante.

Arrastra una imagen o haz clic para subir

PNG, JPEG, WebP, GIF

Preguntas frecuentes

¿Cuál es la diferencia entre HEX, RGB y HSL?
Los tres representan el mismo color en diferentes formatos. HEX (#ff6b35) se usa en CSS y HTML. RGB (255, 107, 53) separa los canales rojo, verde y azul — útil en código. HSL (matiz, saturación, luminosidad) es intuitivo para ajustar colores: cambia la luminosidad para obtener tintes y sombras, cambia la saturación para hacer los colores más o menos vibrantes.
¿Esta herramienta sube mi imagen?
No. La imagen se dibuja en un lienzo local en tu navegador y los píxeles se leen directamente. Nada se envía a un servidor.
¿Por qué el color se ve ligeramente diferente de lo que esperaba?
Los monitores muestran colores de forma diferente según el perfil de color y la calibración. El selector lee el valor de píxel sin procesar — lo que ves en pantalla depende de la configuración de tu pantalla. Las capturas de pantalla también pueden tener el perfil de color aplicado durante la captura.

ACERCA DE ESTA HERRAMIENTA

Upload any image and click anywhere on it to read the exact color at that pixel, returned instantly in HEX, RGB, and HSL formats. This works like the eyedropper tool found in design software, except it runs entirely in your browser with no software install. It's the fastest way to pull an exact brand color off a logo, match a color from a screenshot of someone else's website, or figure out what shade a particular pixel in a photo actually is when you can't just eyeball it. Because it reads real pixel data, the result is precise rather than an approximation from looking at a color swatch.

CÓMO USARLO

  1. Upload the image containing the color you want to identify.
  2. Click on the exact pixel or area whose color you need.
  3. Read the resulting HEX, RGB, and HSL values shown on screen.
  4. Zoom in first if the target area is small, for a more precise click.
  5. Copy the color code you need and paste it into your design tool or CSS.

CASOS DE USO COMUNES

  • A brand manager extracting the exact HEX code from a client's logo file to match it in a new design.
  • A web developer matching a background color from a competitor's screenshot to replicate a layout accurately.
  • A painter or crafter identifying the RGB value of a color in a reference photo before mixing physical paint.
  • A UI designer sampling multiple colors from a mood board image to build a cohesive palette.
  • Someone matching wall paint or a product color to a photo found online before ordering.

CONSEJOS Y ERRORES COMUNES

  • Zoom into the image first if you're picking a color from a small or detailed area — a single misplaced click can grab an anti-aliased edge pixel instead of the intended color.
  • JPEG compression can slightly shift colors due to lossy artifacts, so for exact brand color matching, use a PNG or the original source file if you have one.
  • A gradient or photo rarely has one 'true' color — sample a few nearby pixels and average them if you need a representative shade rather than one exact point.
  • HSL values are often easier to adjust manually than HEX, since hue, saturation, and lightness are separated into distinct numbers.

MÁS PREGUNTAS

Why does the color I picked look slightly different when I use it elsewhere?
Screen calibration, color profiles, and JPEG compression artifacts can all cause small shifts — for exact brand matching, always confirm against an official brand guideline or a lossless source file.
What's the difference between HEX, RGB, and HSL, and why show all three?
They're just different ways of expressing the same color — HEX and RGB are common in web CSS, while HSL is often more intuitive for manually tweaking a shade lighter, darker, or more saturated.
Can I pick a color from a transparent area of a PNG?
Clicking on a fully transparent pixel typically returns no meaningful color, or shows the value with zero alpha, since there's no visible pixel data to sample there.
How accurate is this compared to a physical color-matching tool like a Pantone swatch?
It's pixel-accurate to the digital image file, but a screen's color rendering and a printed swatch can differ, so for print work treat this as a close reference rather than a guaranteed print match.

GUÍAS RELACIONADAS

Códigos de color explicados
Qué significan los códigos de color HEX, RGB y HSL, cómo convertir entre ellos y cuándo usar cada formato.
Leer →
Selector de color desde imagen — UtilYard