Sacar color de una imagen
Haz clic en cualquier punto de una foto y copia el código de su color en HEX, RGB, HSL, HSB, CMYK u OKLCH. En Chrome y Edge también puedes elegir un color de cualquier parte de tu pantalla. La herramienta además lista los colores principales de la imagen y muestra si el texto negro o blanco se lee bien sobre cada uno.
Gratis · Sin registro · Sin subir nada
Paso 1: Añade tu imagen
JPG, PNG o WebP. Se queda en tu dispositivo.
Suelta una imagen aquí
Luego haz clic en cualquier punto para ver su código de color. No se sube nada.
Hay una foto de muestra abierta para que pruebes la herramienta enseguida. Añade tu propia imagen para sustituirla. Las imágenes se abren en tu navegador y nunca se suben.
Qué hace un selector de color de imagen
Una foto es una cuadrícula de píxeles, y cada píxel guarda un color como tres números: cuánto rojo, verde y azul contiene. Esta herramienta lee esos números en el punto donde haces clic y los escribe en los formatos que usan diseñadores y desarrolladores.
Sirve cuando tienes la imagen pero no el código del color. Igualar un logotipo, copiar un tono de la captura de una web o fundir la foto de un producto con el fondo de una página se reducen al mismo paso: señalar el color y copiar el código.
Una lupa muestra los píxeles exactos bajo el cursor, así que puedes apuntar a un solo píxel y no a una mancha. El color al que apuntas aparece mientras te mueves, y un clic lo elige y marca el punto en la foto.
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX | #FF7D3D | CSS, herramientas de diseño, guías de marca |
| RGB | rgb(255, 125, 61) | CSS, código, editores de imagen |
| HSL | hsl(20, 100%, 62%) | Crear versiones más claras u oscuras |
| HSB | hsb(20, 76%, 100%) | Apps de diseño con controles HSB |
| CMYK | cmyk(0%, 51%, 76%, 0%) | Punto de partida para trabajos de impresión |
| OKLCH | oklch(0.730 0.176 44) | CSS moderno, degradados uniformes |
El ejemplo es la tarjeta naranja de la foto de muestra. ¿Quieres usar un color elegido como borde? Pega su código HEX en Añadir margen a una imagen.
Cómo sacar un color de una imagen
- 1
Usa el ejemplo o añade tu imagen
Ya hay una foto de muestra abierta. Para usar la tuya, elige un archivo JPG, PNG o WebP, suéltalo en la herramienta o pega una captura con Ctrl+V o Cmd+V.
- 2
Haz clic en el color que quieres
Mueve el cursor por la imagen para ver los colores en la lupa y haz clic o toca para elegir uno. El color elegido se muestra al instante y se marca en la foto. En Chrome o Edge también puedes tomar un color de cualquier parte de tu pantalla.
- 3
Copia el código
Pulsa Copiar junto a HEX, RGB, HSL u OKLCH. Bajo la foto, una paleta lista sus colores principales, y al hacer clic en cualquiera se muestran también sus códigos.
Funciones del selector de color
Cada función de abajo funciona en tu navegador, sin registro. Las figuras usan la foto de muestra y una segunda foto, y todos los números salen de sus píxeles reales. Los navegadores decodifican el JPEG de forma algo distinta, así que un código puede diferir del tuyo en unos pasos.
Elige el píxel exacto
Lupa · píxel exacto
Una lupa sigue al cursor y muestra los píxeles de alrededor como cuadrados grandes, con un marco rojo en el que elegirá un clic. El punto elegido recibe una marca rellena de su propio color, y los códigos aparecen junto a la foto. En la figura, cada anillo es un clic: el punto 2, sobre la tarjeta mandarina, es #FF7D3D, es decir, rgb(255, 125, 61) o hsl(20, 100%, 62%). En una pantalla táctil, toca el punto. Una foto grande se muestra más pequeña que su tamaño real, así que el ratón puede saltarse píxeles. Las flechas mueven exactamente un píxel cada vez, o diez con Mayús, y la línea bajo la foto muestra la posición del píxel.
Mira los colores principales automáticamente
De 2 a 12 colores
Cada imagen recibe bajo ella una tira de paleta, construida con sus propios píxeles. Usa − y + para mostrar de 2 a 12 colores, haz clic en un segmento para ver sus códigos o descarga la tira como PNG. Aquí el cielo azul turquesa pálido ocupa más espacio, cerca del 34 %, así que #ABC7C1 abre la tira, seguido de un marrón oscuro (#6C513F, 21 %), un casi negro (#3C3D35, 17 %) y tres tonos tierra más claros. Pasa el cursor por un segmento para ver su porcentaje.
Comprueba el contraste del texto blanco y negro
WCAG AA
Cada color muestra su contraste con texto blanco y negro, marcado como aprobado o no según WCAG AA (4,5:1 para texto normal). La herramienta prueba solo texto blanco y negro. La figura prueba cuatro píxeles exactos de la foto de los globos. Sobre el azul cielo #A1CDD0, el blanco da 1,7:1 y el negro 12,2:1, así que solo el negro pasa. El terracota #A5493E es lo contrario para texto normal: 5,8:1 con blanco y 3,6:1 con negro, que aun así superaría el 3:1 exigido al texto grande. La roca en sombra #3B443F pasa con blanco, con 10,1:1, y la arena #C8A06F pasa con negro, con 8,7:1.
HEX · RGB · HSL · HSB · CMYK · OKLCH
Seis formatos de color, un clic cada uno
Cada formato tiene su propio botón Copiar, así que puedes pegar un valor directamente en CSS, en una app de diseño o en una guía de marca. La herramienta también indica el color CSS más cercano, como coral o tomato, y avisa cuando tu color coincide exactamente.
Chrome y Edge
Elige de cualquier parte de tu pantalla
El botón del cuentagotas toma un color de cualquier ventana abierta, una web u otra aplicación incluidas, no solo de la imagen. Pulsa Esc para cancelar. Los navegadores sin esta función, como Firefox y Safari, muestran una breve explicación en lugar del botón.
JPG · PNG · WebP · hasta 20 MB
Empieza al instante, trae tu imagen
Al cargar la página hay una foto de muestra abierta, con un color ya elegido. Sustitúyela con Usar tu propia imagen, soltando un archivo en la herramienta o pegando una captura. Todo funciona en tu navegador y no se sube nada.
Consejos para elegir mejores colores
Apunta al centro de una zona
Los píxeles del borde son una mezcla de los dos colores que se encuentran allí. Haz clic bien dentro de una superficie y usa la lupa para comprobar que el recuadro rojo está sobre un tono uniforme.
Empieza por la paleta
La paleta lista los colores que cubren más parte de la imagen. Pulsa + para dividir las zonas grandes en más tonos y haz clic en un segmento para ver sus códigos.
Usa PNG para logotipos y dibujos planos
La compresión JPEG esparce el color alrededor de los bordes nítidos. Una exportación en PNG de un logotipo da códigos limpios y exactos.
Prueba el color antes de usarlo
Cada color muestra su contraste con texto blanco y negro. Compruébalo antes de poner texto sobre él.
Por qué el color elegido no siempre es el que esperabas
Dos puntos que se ven iguales pueden tener códigos distintos
La compresión JPEG mueve un poco los valores de los píxeles en bloques pequeños, así que una zona que parece lisa puede variar unos pasos de un píxel a otro. Si un código parece algo distinto, haz clic en un píxel o dos al lado y compara. Los dibujos planos guardados como PNG dan los resultados más estables.
La iluminación cambia el color en una foto
Las sombras, las luces, el balance de blancos y el procesado de la cámara cambian lo que guarda un píxel. La herramienta da el color tal como aparece en la foto, así que una muestra de pintura o una tela de una habitación no coincidirán exactamente.
Los colores se leen en sRGB
sRGB es el estándar de los colores web. Si una imagen trae otro perfil de color, el navegador la convierte al abrir el archivo, así que una aplicación de escritorio que muestre el perfil original puede dar números ligeramente distintos.
Dónde usar el color de una imagen
Tres usos habituales y qué copiar en cada uno.
HEX · RGB · OKLCH
Webs y CSS
Pega un código HEX directamente en una hoja de estilos, como en color: #ff7d3d. RGB, HSL y OKLCH funcionan igual dentro de rgb(), hsl() y oklch().
Haz clic en un color de la paleta bajo la foto para ver su código en los mismos seis formatos, listo para pegar.
HEX
Marca y diseño
Si falta la guía de marca, saca los colores del archivo de un logotipo o de una captura de la web. Los logotipos PNG nítidos dan los resultados más limpios.
Con Descargar paleta PNG guardas los colores principales de una foto de referencia en una tira que puedes enviar a un cliente o añadir a un moodboard.
WCAG
Texto legible sobre un color
El cuadro de contraste muestra la proporción para texto blanco y para texto negro sobre el color elegido. El nivel AA de WCAG pide al menos 4,5:1 para texto normal y 3:1 para texto grande.
La tarjeta mandarina da 2,5:1 con texto blanco y 8,3:1 con texto negro, así que ahí lo seguro es el negro.
Las proporciones de contraste salen solo del color elegido. Si el texto va sobre una foto y no sobre un relleno liso, comprueba también el punto que queda detrás del texto.
Preguntas frecuentes
¿Cómo saco un color de una imagen?
Sube la imagen, mueve el cursor por ella y haz clic en el punto que quieras. En el móvil, tócalo. Junto a la imagen aparecen los códigos HEX, RGB, HSL y OKLCH de ese punto, con un botón Copiar para cada uno.
¿Cómo encuentro el código hexadecimal de un color de una foto?
Elige el color como se explica arriba y pulsa Copiar junto a HEX. Un código hexadecimal es una almohadilla seguida de seis caracteres, dos para el rojo, dos para el verde y dos para el azul, como #FF7D3D.
¿Qué diferencia hay entre HEX, RGB, HSL y OKLCH?
Describen el mismo color de maneras distintas. HEX y RGB dan las cantidades de rojo, verde y azul, en base 16 y en base 10. HSL da el tono, la saturación y la luminosidad, lo que facilita crear una versión más clara u oscura de un color.
OKLCH es una notación más reciente que CSS admite en las versiones actuales de los navegadores principales. Su luminosidad sigue lo claro que se ve un color, y eso mantiene uniformes los degradados y las escalas de tonos.
¿Por qué el código es distinto del que me dio otra herramienta?
Lo habitual es el píxel exacto en el que hiciste clic y el perfil de color. Las fotos varían un poco de un píxel a otro, así que un clic un píxel más allá puede dar otro código.
Una foto con un perfil de color distinto de sRGB también puede leerse diferente, porque esta herramienta lee los colores tal como los muestra el navegador.
¿Cómo encuentra la herramienta los colores principales de una imagen?
Lee los píxeles de tu imagen, agrupa los tonos parecidos y divide esos grupos en el número de colores que elijas. Cada color es el promedio de su grupo, y su porcentaje es la parte de píxeles más cercanos a él. Una imagen muy grande se lee en una cuadrícula regular de píxeles, que da la misma paleta.
Una zona grande y lisa, como un cielo o un fondo, recibe su propio color pero no ocupa toda la paleta, así que los detalles más pequeños también aparecen.
¿Qué hace Elegir de cualquier parte de la pantalla?
Usa el cuentagotas integrado en tu navegador. Pulsa el botón y haz clic en cualquier color de tu pantalla, en cualquier ventana y no solo en la imagen subida. Pulsa Esc para cancelar.
El color elegido se muestra al instante con sus códigos. Lo ofrecen Chrome y Edge en el ordenador. Firefox y Safari no, así que en ellos la página lo explica en lugar de mostrar el botón.
¿Qué es el nombre CSS más cercano?
CSS tiene una lista de colores con nombre, como tomato, coral o rebeccapurple. La herramienta busca el que más se parece a tu color y lo muestra. El nombre es una palabra clave de CSS, así que es igual en todos los idiomas, y solo coincide exactamente cuando tu color es uno de los que tienen nombre.
¿Qué tipos de imagen puedo usar?
Archivos JPG, PNG y WebP de hasta 20 MB. También sirve un PNG o WebP con transparencia. Si eliges un píxel transparente, la herramienta te lo avisa y muestra el color sin la transparencia.
¿Es gratis este selector de color?
Sí. No hay registro, ni marca de agua, ni límite de colores que puedas elegir. Las imágenes de hasta 20 MB se abren en tu navegador y no se sube nada.
¿Puedo usarlo en el móvil o la tableta?
Sí. Toca la imagen para elegir un color. La lupa es para el ratón, así que en una pantalla táctil una marca señala el punto que tocaste y los códigos aparecen justo después de la imagen.
¿Puedo sacar un color de una captura de pantalla o de una web?
Sí, de dos maneras. Pega una captura con Ctrl+V o Cmd+V, o sube el archivo de la captura, y haz clic en el color. En Chrome o Edge también puedes usar Elegir de cualquier parte de la pantalla para tomar un color de cualquier ventana abierta, una web incluida.
¿Cómo se calculan los valores HSB y CMYK?
Ambos salen del color sRGB por aritmética. HSB, también escrito HSV, usa el mismo tono que HSL, con la saturación y el brillo medidos respecto al canal más brillante.
CMYK es una conversión simple, no un perfil de impresión. Una impresora o una imprenta pasa el mismo color por su propio perfil, así que sus porcentajes pueden diferir. Tómalos como punto de partida y compáralos con una prueba.
¿Por qué ya hay una imagen en la página?
Se abre primero una foto de muestra para que veas cómo funciona la herramienta antes de añadir nada. Añade la tuya con Usar tu propia imagen, suéltala en la herramienta o pégala, y sustituirá a la de muestra.
¿Se suben mis imágenes a algún sitio?
No. Es tu propio navegador el que abre la imagen y lee sus píxeles. No se envía nada a ningún servidor y no se guarda nada al cerrar la pestaña.