¿Cómo saber el código de un color de una imagen?

Abre la imagen en la herramienta y toca el punto que te interesa. Al instante verás su código HEX, RGB, HSL y CMYK. En Chrome o Edge de escritorio también puedes usar el cuentagotas para tomar colores de cualquier ventana de la pantalla.

¿Cómo pasar un color de HEX a RGB?

Escribe el código HEX, por ejemplo #2E7D32, y la herramienta mostrará el RGB equivalente, en este caso rgb(46, 125, 50). La conversión funciona en ambos sentidos y a HSL y CMYK. Toca cualquier valor para copiarlo.

¿El CMYK que muestra sirve para imprimir?

Sirve como punto de partida, pero no es exacto. Cada imprenta ajusta los colores con perfiles propios de su papel y su máquina. Para colores de marca importantes, pide una prueba impresa o pregunta qué valores CMYK recomienda tu impresor.

¿Qué significa AA y AAA en contraste?

Son los niveles de las pautas de accesibilidad WCAG. AA pide una relación de al menos 4.5:1 para texto normal y AAA, de 7:1. Cumplir AA asegura que la mayoría de las personas, incluidas las que ven con dificultad, puedan leer tu texto.

¿Cómo encontrar colores que combinen?

Usa la sección de armonías: muestra el complementario, que es el opuesto en la rueda, y los colores análogos y triádicos. Combinados con los tonos más claros y oscuros del mismo color, te dan una paleta completa para una presentación o un logotipo.

¿El selector de color funciona en el celular?

Sí: la rueda, los campos de código y la selección desde una imagen funcionan en cualquier celular. Lo único que no está disponible en teléfonos es el cuentagotas para tomar colores de cualquier parte de la pantalla, que solo existe en Chrome y Edge de escritorio.

Código de colores HEX, RGB y selector de color

Elige un color en la rueda, escribe un código o tómalo de una imagen, y obtén su HEX, RGB, HSL y CMYK, más su contraste y combinaciones.

Gratis y sin registro. Lo que escribes no sale de tu navegador.

Código de color (HEX, RGB o HSL)

Tomar de una imagen

HEX
RGB
HSL
CMYK (aprox.)
Contraste con texto

Más claros

Más oscuros

Armonías

Cómo usar Código de colores

Elige un color en la rueda, o escribe un código como #1E88E5 o rgb(30, 136, 229) en el campo correspondiente.
Para copiar un color de una foto o logotipo, pulsa «Tomar de una imagen», abre la foto y toca el punto exacto. En Chrome o Edge de escritorio también puedes usar el «Cuentagotas» para tomarlo de cualquier parte de la pantalla.
Revisa los valores en HEX, RGB, HSL y CMYK; un toque en cualquiera lo copia.
Baja a los tonos y armonías para armar una paleta, y comprueba el contraste antes de usar el color con texto.

Cómo leer cada código de color y su contraste

HEX, RGB y HSL

HEX y RGB describen el mismo color en pantalla: #FF0000 y rgb(255, 0, 0) son el mismo rojo. HEX es el formato habitual en diseño web y en Canva; RGB, en programas y hojas de estilo. HSL separa tono, saturación y luminosidad, así que es el más cómodo para hacer una versión más clara de un color sin cambiar su tono.

CMYK es una aproximación

CMYK son los porcentajes de cian, magenta, amarillo y negro de la impresión. La conversión que ves aquí es matemática y sirve de guía, pero una imprenta convierte con perfiles de color propios del papel y la máquina. Si un tono de marca debe salir exacto en tarjetas o lonas, pide una prueba de color impresa antes de la tirada.

Contraste y legibilidad

La herramienta calcula la relación de contraste del color con texto blanco y con texto negro, y te dice si cumple los niveles AA y AAA de las pautas de accesibilidad WCAG. Un botón verde claro con letras blancas puede verse bien en tu monitor y ser ilegible en un celular a pleno sol. Si no pasa AA, oscurece el fondo o cambia el color del texto.

Más claros, más oscuros y armonías

Para cada color verás 10 pasos más claros y 10 más oscuros, ideales para fondos, bordes y estados de botones. Las armonías proponen el color complementario, los análogos, la tríada y el complementario dividido. Todo se calcula en tu navegador: si tomas un color de una imagen, la foto se abre solo en tu equipo y no se sube.

Preguntas frecuentes

¿Cómo saber el código de un color de una imagen?: Abre la imagen en la herramienta y toca el punto que te interesa. Al instante verás su código HEX, RGB, HSL y CMYK. En Chrome o Edge de escritorio también puedes usar el cuentagotas para tomar colores de cualquier ventana de la pantalla.
¿Cómo pasar un color de HEX a RGB?: Escribe el código HEX, por ejemplo #2E7D32, y la herramienta mostrará el RGB equivalente, en este caso rgb(46, 125, 50). La conversión funciona en ambos sentidos y a HSL y CMYK. Toca cualquier valor para copiarlo.
¿El CMYK que muestra sirve para imprimir?: Sirve como punto de partida, pero no es exacto. Cada imprenta ajusta los colores con perfiles propios de su papel y su máquina. Para colores de marca importantes, pide una prueba impresa o pregunta qué valores CMYK recomienda tu impresor.
¿Qué significa AA y AAA en contraste?: Son los niveles de las pautas de accesibilidad WCAG. AA pide una relación de al menos 4.5:1 para texto normal y AAA, de 7:1. Cumplir AA asegura que la mayoría de las personas, incluidas las que ven con dificultad, puedan leer tu texto.
¿Cómo encontrar colores que combinen?: Usa la sección de armonías: muestra el complementario, que es el opuesto en la rueda, y los colores análogos y triádicos. Combinados con los tonos más claros y oscuros del mismo color, te dan una paleta completa para una presentación o un logotipo.
¿El selector de color funciona en el celular?: Sí: la rueda, los campos de código y la selección desde una imagen funcionan en cualquier celular. Lo único que no está disponible en teléfonos es el cuentagotas para tomar colores de cualquier parte de la pantalla, que solo existe en Chrome y Edge de escritorio.

Todas las herramientas de Utilidades · Actualizado: 12 de octubre de 2026 ·