Selector de color y extractor de paletas: elige colores de una imagen

Sube cualquier JPG, PNG, WebP o GIF y haz clic en cualquier punto de la imagen mostrada: se muestrea el píxel exacto bajo tu cursor y se muestra en HEX, RGB y HSL con copia en un clic para cada formato. Perfecto para igualar un color de marca, muestrear un tono de una fotografía o capturar colores de acento de un boceto de diseño.

Haz clic en cualquier píxel y este selector de color muestra su código de color HEX (por ejemplo #FF6B35) junto a RGB y HSL: los mismos códigos de color HTML/CSS que pegas directamente en una hoja de estilos, un token de diseño o un atributo HTML. Pulsa Copiar para llevarte el código hex con un solo clic.

La imagen se reduce a 320 píxeles en su lado más largo y luego cada píxel se agrupa según sus 4 bits superiores por canal. Los grupos más poblados se promedian de nuevo a color completo de 8 bits, se ordenan por frecuencia y se devuelven como tu paleta. El resultado suele ser de 5 a 24 colores dominantes que resumen visualmente la imagen.

Sí. Los botones de descarga producen dos formatos: un bloque de variables CSS listo para pegar en un selector :root (--color-1, --color-2…) y un archivo JSON con el valor hexadecimal, los componentes RGB y el porcentaje de peso de cada color. Ambos formatos se integran limpiamente en tokens de diseño, configuraciones de Tailwind y bibliotecas de paletas.

No: la selección de color y la extracción de paletas se realizan íntegramente en tu navegador mediante la API canvas de HTML. La imagen permanece en tu dispositivo, lo que hace que la herramienta sea segura para fotos de productos sin lanzar, maquetas en borrador y recursos de marca sujetos a acuerdos de confidencialidad.

Para trabajos de identidad de marca, de 5 a 8 colores es el punto ideal: captura el tema dominante sin diluir las opciones de acento. Para visualización de datos recomendamos de 10 a 16 colores, así tienes suficientes tonos categóricos. El control deslizante te permite elegir entre 5 y 24.

Los píxeles con un alfa inferior a 128 se ignoran, de modo que los fondos transparentes no contaminan la paleta con colores de «fondo». Esto hace que el Selector de Color de Imagen sea especialmente útil para recortes de productos, ilustraciones de stickers y sujetos aislados.

HEX (#RRGGBB) es el más compacto y es el que usan CSS, Figma y Sketch de forma predeterminada. RGB muestra los tres valores de componente del 0 al 255, útil al trabajar con datos de imagen de forma programática. HSL (tono, saturación, luminosidad) es intuitivo para ajustar colores: desplaza el tono para cambiar de familia de color y ajusta la luminosidad para los tintes y las sombras.

Sí. Gratis, sin necesidad de cuenta y sin límites en el tamaño de la imagen ni en el número de paletas extraídas. No hay nada que instalar: toda la herramienta es una única página web.

No hace falta ninguna imagen. El selector de color y la rueda de la parte superior funcionan por sí solos: arrastra el cuadro de saturación/brillo y el control de tono, o escribe cualquier valor HEX, RGB o HSL para ajustar un color exacto. Subir una imagen es opcional, solo para extraer colores de una foto con el cuentagotas.

Elige tu color base y el panel de Armonías de color crea al instante esquemas complementarios, análogos, triádicos, complementarios divididos, tetrádicos y monocromáticos usando la teoría de la rueda de color. Haz clic en cualquier muestra para copiar su código HEX.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Haz clic en Aleatorio en el Selector de color y rueda cromática para saltar a un nuevo color, y luego usa el panel de Armonías de color de abajo para ver paletas complementarias, análogas, triádicas y otras combinaciones creadas a partir de ese color: una forma rápida de encontrar un punto de partida cuando diseñas desde cero en lugar de tomar muestras de una imagen existente.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.