Selector de Color

Selecciona colores de cualquier imagen o de tu pantalla con nuestro selector de color en línea gratuito. Obtén códigos HEX, RGB y HSL al instante. 100% privado y funciona en tu navegador.

A color picker extracts color values from images or your screen, returning HEX, RGB, and HSL codes for any pixel you click. It uses the browser's Canvas API to read pixel data from uploaded images, and the EyeDropper API (Chrome, Edge) to capture colors from anywhere on your screen. All processing happens locally -- no images or color data are transmitted.

Selecciona colores de imágenes o tu pantalla sin subidas

Upload an image or use the system-wide eyedropper to capture any pixel on your screen. Get HEX, RGB, and HSL instantly — all locally in your browser.

Todos los formatos

Screen eyedropper

Gratis ilimitado

Como usarlo

1
Elige el Método
Sube una imagen o usa el botón 'Seleccionar de la Pantalla'.
2
Selecciona el Color
Pasa el ratón sobre tu imagen para ver una vista previa, luego haz clic para capturar el color.
3
Copia el Código
El color se añade a tu historial. Haz clic para copiar su valor HEX, RGB o HSL.

El Mejor Amigo de un Diseñador y Desarrollador

Para Diseñadores

Obtén rápidamente el código hexadecimal exacto de un logo de marca, una imagen de un panel de inspiración o una foto inspiradora. Construye tus paletas de colores con una precisión de píxel perfecta.

Para Desarrolladores

Extrae valores de color de una maqueta de interfaz de usuario (JPG o PNG) para usarlos directamente en tu código CSS o de la aplicación. Obtén valores RGB para desarrollo nativo o HEX para estilos web.

Understanding Digital Color Picking

Cómo funciona el color digital

Digital displays reproduce colors using the RGB (Red, Green, Blue) additive color model. Each pixel on a screen is composed of three subpixels -- red, green, and blue -- each of which can be set to 256 brightness levels (0-255). By combining these three channels, a standard display can produce 16.7 million colors (256^3). The color value you pick from an image or screen is the RGB triplet of that specific pixel, which can be expressed in multiple notations: HEX (#00BFA5), RGB (rgb(0, 191, 165)), or HSL (hsl(174, 100%, 37%)).

When you pick a color from an image using our tool, the browser's Canvas API reads the pixel data at the click position using getImageData(). This returns a Uint8ClampedArray containing the RGBA values (red, green, blue, alpha) of the pixel. The alpha channel (0-255) represents transparency --0 is fully transparent, 255 is fully opaque. The tool then converts the RGB values to HEX and HSL for display. For screen-wide color picking, the EyeDropper API captures a single pixel's color from anywhere on your display, including other browser tabs and desktop applications.

Color spaces matter when picking colors for different purposes. The sRGB color space is the standard for web design -- it's what browsers, CSS, and HTML use. However, many modern displays support wider color gamuts (Adobe RGB, Display P3) that can show more saturated colors than sRGB. When you pick a color from a P3-display image, the browser may report P3 values that are out of sRGB gamut. For web design, always work in sRGB to ensure consistent color across devices. For print design, consider converting to CMYK using a dedicated print color management tool.

Practical color picking workflows

Designers use color pickers in several workflows: extracting brand colors from a logo image, building a color palette from a photograph, matching colors between a design mockup and a live website, and capturing inspiration colors from anywhere on screen. The EyeDropper API is particularly powerful for the last use case -- you can pick a color from a design in Figma, a color from a website in another tab, or even a color from a desktop application, without taking a screenshot first.

Al construir una paleta de colores a partir de una imagen, elige 3-5 colores que representen los tonos dominantes. Comienza con el color más prominente (a menudo el fondo), luego elige 1-2 colores de acento y finalmente un neutro. Herramientas como el generador de paletas pueden automatizar este proceso analizando el histograma de color de la imagen. Al elegir colores para accesibilidad, comprueba siempre la relación de contraste entre el texto y los colores de fondo — nuestra herramienta de comprobación de contraste usa la fórmula de contraste WCAG 2.1 para garantizar la legibilidad.

Entendiendo los Códigos de Color

HEX (Hexadecimal)

Ejemplo: #00BFA5. El formato más común para los colores web. Un código de seis dígitos que representa la mezcla de Rojo, Verde y Azul.

RGB (Rojo, Verde, Azul)

Ejemplo: rgb(0, 191, 165). Define la intensidad de los componentes de luz roja, verde y azul (0-255).

HSL (Tono, Saturación, Luminosidad)

Ejemplo: hsl(174, 100%, 37%). Más intuitivo para los humanos. El Tono es el tipo de color, la Saturación es la intensidad y la Luminosidad es el brillo.

¿Cómo se compara con otros selectores de color?

Una comparación lado a lado de herramientas populares de selector de color.

Característica	NovaTools	ImageColorPicker.com	ColorHexa
Pick from image	Canvas API	SÍ
Pick from screen	EyeDropper API
HEX + RGB + HSL output	All three	HEX only	SÍ
Color history	Unlimited
Privacidad (sin subida)	100% local	sube la imagen
Funciona sin conexión	SÍ

Most online color pickers require uploading your image to their server. Our tool reads pixel data directly from the Canvas API in your browser -- your images never leave your device. The EyeDropper API enables screen-wide color capture, which server-based tools cannot offer.

Preguntas frecuentes

¿Se suben mis imágenes a un servidor?

No. Tu privacidad está garantizada. Todo el procesamiento ocurre completamente dentro de tu navegador web. Tus imágenes nunca abandonan tu dispositivo, y nunca las vemos ni las almacenamos.

¿Qué es el botón 'Seleccionar Color de la Pantalla'?

Esta función utiliza la API EyeDropper integrada de tu navegador (Chrome/Edge/Opera). Te permite seleccionar un color de cualquier aplicación o ventana en toda tu pantalla, no solo de la imagen en el navegador.

¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX (#RRGGBB) es el estándar para el diseño web. RGB utiliza valores de 0-255 para la intensidad de Rojo, Verde y Azul. HSL (Tono, Saturación, Luminosidad) suele ser más intuitivo para que los humanos ajusten las propiedades del color.

Which browsers support the EyeDropper API?

The EyeDropper API is currently supported in Chrome (version 95+), Edge (version 95+), and Opera (version 81+). It is not supported in Firefox or Safari as of 2026. If you are using an unsupported browser, the 'Pick from Screen' button will not appear, but you can still pick colors from uploaded images. The EyeDropper API is a W3C draft specification, so support may expand to other browsers in the future. For Firefox users, a similar feature is available through browser extensions. For Safari users, the built-in Digital Color Meter utility (in Applications > Utilities) provides similar system-wide color picking.

¿Puedo seleccionar múltiples colores y mantener un historial?

Yes. Every color you pick is automatically added to your color history, which appears below the main color display. Each history entry shows the color swatch, HEX value, RGB value, and HSL value, with individual copy buttons for each format. You can pick an unlimited number of colors in a single session. The history persists until you refresh or close the page — it is not saved to local storage or transmitted to any server. This is useful for building a color palette from a single image or capturing multiple colors from different parts of your screen.

¿Cómo copio un valor de color?

Click any color value (HEX, RGB, or HSL) in the display or history section to copy it to your clipboard. The copied value is formatted as a CSS-ready string: `#00BFA5` for HEX, `rgb(0, 191, 165)` for RGB, or `hsl(174, 100%, 37%)` for HSL. You can paste it directly into your CSS, SCSS, Tailwind config, design tool, or code editor. The tool uses the Clipboard API for reliable copying across all modern browsers. A visual confirmation (checkmark or tooltip) appears when the value is copied successfully.

¿Puedo usar esta herramienta para seleccionar colores de un sitio web?

Yes, using the 'Pick from Screen' feature in supported browsers (Chrome, Edge, Opera). Navigate to the website you want to pick colors from, then click the 'Pick from Screen' button in our tool. The browser will minimize our tool and let you pick any pixel visible on your screen, including pixels from other browser tabs, desktop applications, or the operating system UI. This is perfect for matching brand colors, extracting a website's color scheme, or capturing a color from a design mockup in Figma or Sketch.

¿Qué tan precisos son los valores de color?

The tool reads exact pixel values from the image or screen using the browser's native color pipeline. For uploaded images, the accuracy is perfect — the tool reads the raw RGB values from the image file. For screen picking, the accuracy depends on your display's color profile and calibration. Most modern displays use the sRGB color space, which matches the tool's output format. If your display uses a wider gamut (e.g., Display P3 on modern Macs), the picked color may not exactly match the original source color, but the difference is usually imperceptible for design purposes.

Su privacidad es nuestra prioridad

Esta herramienta se ejecuta completamente en su navegador. Sus archivos no se suben, almacenan ni analizan.

No subimos, almacenamos ni analizamos sus archivos.
Todo lo que procesa permanece en su dispositivo.
No hay procesamiento del lado del servidor, ni almacenamiento en la nube, ni análisis.

Incluso si su conexión a internet se cae, sus archivos permanecen seguros.

También te podría gustar

Explorar este tema

Todas las herramientas de esta categoriaHerramientas de Color Guias de este temaDiseno y accesibilidad

Verificador de Contraste

Verifica el contraste de color según las directrices WCAG.

Generador de Paletas

Crea hermosas paletas de colores.

Conversor HEX ↔ RGB ↔ HSL

Convierte colores entre los formatos HEX, RGB y HSL. Vista previa en vivo, presets rápidos, copia valores listos para CSS. 100% del lado del cliente, sin subidas.