Pasa valores CMYK a un código HEX

Última revisión del contenido:

Escribe los cuatro porcentajes de tinta y el código HEX aparece mientras escribes: cmyk(76%, 47%, 0%, 4%) es #3B82F5. El campo acepta números con y sin signo de porcentaje, decimales con coma o con punto y las letras C, M, Y, K, así que puedes pegar los valores tal como vienen en el manual de identidad o en la ficha de la imprenta.

a

¿Cómo se pasa CMYK a HEX?

Primero sacas de las cuatro tintas tres canales de luz y después escribes cada canal con dos caracteres hexadecimales. Los porcentajes entran en la fórmula como fracciones, así que 76% es 0,76.


La fórmula: R = 255 × (1 − C) × (1 − K). El verde sale igual del magenta, y el azul, del amarillo.


Para cmyk(76%, 47%, 0%, 4%) el canal rojo es 255 × 0,24 × 0,96, es decir, 59; el verde da 130 y el azul, 245. Ahora divides cada número entre 16: 59 es 3 veces 16 con resto 11, y al 11 le corresponde la letra B, así que el rojo queda como 3B. Del mismo modo, 130 da 82, y 245, F5. El resultado es #3B82F5.


El convertidor CMYK a RGB se queda a mitad de camino, en los tres números. Un código de pantalla lo pasas a tintas con el convertidor HEX a CMYK.

¿Qué dicen los cuatro números CMYK y los seis caracteres HEX?

Los cuatro números del modelo CMYK son una receta para la máquina: qué parte del papel se cubre de cian, magenta, amarillo y negro[1]. Por eso aparecen en las fichas de las imprentas y en los manuales de identidad, porque describen la tinta y no lo que se ve en el monitor.


Los seis caracteres HEX son tres números de 0 a 255 escritos en sistema hexadecimal, dos caracteres para la luz roja, dos para la verde y dos para la azul[2]. Ese código es el que pegas en el CSS, en la plantilla de tu web, en Canva o en Figma.


El resultado siempre tiene seis caracteres, porque la tinta no tiene transparencia y no hay nada que poner en un séptimo y un octavo carácter. Escribimos el código en mayúsculas, aunque el navegador lee igual #3b82f5[2].


Si tienes el color en otro formato, como OKLCH, Lab o código de Android, el convertidor de colores lo muestra a la vez en todos los formatos.

¿Qué código HEX tienen las tramas de las cuatro tintas?

Una trama es una tinta que cubre solo parte de la superficie, por ejemplo 50% de cian. La lista muestra cómo se aclara cada una de las cuatro tintas cuando baja su porcentaje. El convertidor calculó todos los códigos.
Valores CMYKTintaCódigo HEX
100%, 0%, 0%, 0%Cian 100%#00FFFF
50%, 0%, 0%, 0%Cian 50%#80FFFF
20%, 0%, 0%, 0%Cian 20%#CCFFFF
0%, 100%, 0%, 0%Magenta 100%#FF00FF
0%, 50%, 0%, 0%Magenta 50%#FF80FF
0%, 20%, 0%, 0%Magenta 20%#FFCCFF
0%, 0%, 100%, 0%Amarillo 100%#FFFF00
0%, 0%, 50%, 0%Amarillo 50%#FFFF80
0%, 0%, 20%, 0%Amarillo 20%#FFFFCC
0%, 0%, 0%, 100%Negro 100%#000000
0%, 0%, 0%, 50%Negro 50%#808080
0%, 0%, 0%, 20%Negro 20%#CCCCCC
0%, 0%, 0%, 10%Negro 10%#E6E6E6
La trama de una tinta solo cambia en el código el par que le corresponde: el cian baja el par rojo, el magenta el verde y el amarillo el azul. El negro baja los tres pares a la vez, por eso sus tramas dan grises.

El manual de identidad da otro código HEX que el convertidor. ¿Cuál uso?

Usa el del manual. La fórmula supone tintas perfectas sobre un papel perfectamente blanco, así que su resultado sale más claro y más saturado que una impresión real. El código del manual suele estar mucho más cerca de lo que se ve en el papel.


La guía de identidad del Gobierno de México lo deja claro. Para el Pantone 7421 C da 42% de cian, 96% de magenta, 56% de amarillo y 48% de negro, junto con el código #611232[3]. La fórmula convierte esas tintas en #4D053A, un morado oscuro. Pasamos las mismas tintas por dos perfiles de imprenta con la biblioteca Little CMS[4]: PSO Coated v3, de la European Color Initiative[5], da #64162D, y GRACoL 2013, del registro ICC[6], da #642434. Los dos quedan cerca del código de la guía.

Banda de papel con páginas de periódico impresas pasando entre los rodillos de acero de una rotativa
Una banda de papel con páginas de periódico impresas pasa entre los rodillos de acero de una rotativa. En una impresión así el color depende de la tinta y del papel, no solo de cuatro números, y justo esas condiciones son las que describe un perfil de imprenta. Foto: Bank Phrom, Unsplash

Cuando el manual solo trae CMYK, el convertidor te da un código de trabajo. Compáralo con un folleto o una tarjeta de visita impresos y oscurece el color en Figma o en el CSS si en pantalla brilla más que en el papel.

Colores del Gobierno de México: fórmula, perfiles de imprenta y guía

Cuatro colores institucionales de la Guía de Identidad Gráfica del Gobierno de México 2024-2030 con sus valores CMYK de la página 17[3]. Las columnas de los perfiles están calculadas en modo colorimétrico relativo con compensación de punto negro.
CMYK en la guíaHEX con la fórmulaHEX con PSO Coated v3HEX con GRACoL 2013HEX en la guía
42%, 96%, 56%, 48%#4D053A#64162D#642434#611232
29%, 98%, 59%, 18%#940456#9C183F#9A2A43#9B2247
32%, 46%, 100%, 10%#9C7C00#A77E09#A57F21#A57F2C
83%, 39%, 65%, 37%#1B6238#135849#245A4D#1E5B4F
En los cuatro colores los dos perfiles quedan más cerca de la guía que la fórmula. El color 32%, 46%, 100%, 10% es el caso más ajustado: GRACoL 2013 da #A57F21 y la guía, #A57F2C.

¿Vuelven los valores CMYK tras pasar a HEX y de regreso?

La fórmula en sentido contrario siempre deja en cero al menos una de las tres tintas de color. Por eso un valor en el que cian, magenta y amarillo están a la vez por encima de cero vuelve cambiado. Lo comprobamos con 1 875 000 valores así, y ninguno volvió igual.
CMYK al inicioCódigo HEXCMYK al volver
100%, 80%, 0%, 0%#0033FF100%, 80%, 0%, 0%
76%, 47%, 0%, 4%#3B82F576%, 47%, 0%, 4%
0%, 12%, 100%, 5%#F2D5000%, 12%, 100%, 5%
20%, 30%, 40%, 0%#CCB3990%, 12%, 25%, 20%
40%, 30%, 20%, 10%#8AA1B825%, 13%, 0%, 28%
60%, 40%, 40%, 100%#0000000%, 0%, 0%, 100%
100%, 100%, 100%, 100%#0000000%, 0%, 0%, 100%
El negro enriquecido 60%, 40%, 40%, 100% y el negro de registro se convierten los dos en #000000, y de ese código solo vuelve la tinta negra sola. En el archivo de impresión pon los valores CMYK del manual o de la ficha de la imprenta, no el resultado de un viaje de ida y vuelta por HEX.

¿Qué formas de escribir CMYK acepta este convertidor?

El campo acepta y convierte todas estas formas, así que no hace falta corregir nada antes de pegar. La tabla muestra qué hace el convertidor con cada una, y los resultados los calculó él mismo.
Lo que escribesLo que muestra el convertidorCómo lo leemos
76, 47, 0, 4#3B82F5Leemos cuatro números como porcentajes en el orden cian, magenta, amarillo y negro.
76 47 0 4#3B82F5Bastan los espacios, porque las comas entre los números no hacen falta.
cmyk(76%, 47%, 0%, 4%)#3B82F5La forma con paréntesis, igual que el resultado del convertidor HEX a CMYK, la aceptamos con su nombre.
C 76 M 47 Y 0 K 4#3B82F5Las letras de canal con las que los manuales de identidad marcan cada tinta las saltamos y nos quedamos con los números.
76,5 47 0 4#3A82F5La coma entre dos cifras la leemos como decimal, como se escribe en España, porque si no saldrían cinco números en vez de cuatro.
76.5 47 0 4#3A82F5El punto decimal, como se escribe en México, da el mismo resultado.
0.76, 0.47, 0, 0.04#3B82F5Las fracciones de 0 a 1 que devuelven algunos programas y bibliotecas las pasamos a porcentajes.
device-cmyk(76% 47% 0% 4%)#3B82F5También aceptamos la notación de la especificación CSS Color Module Level 5.
150, 0, 0, 0#00FFFFUn valor por encima de 100 lo dejamos en 100 y uno negativo en cero, porque la tinta no puede cubrir más que toda la superficie.
La notación device-cmyk() está definida en CSS Color Module Level 5[7].

Convertir otras unidades a HEX

RGB a HEXHSL a HEX

Convertir CMYK a otras unidades

CMYK a RGB

Fuentes

  1. Modelo de color CMYK — Wikipedia
  2. CSS Color Module Level 4: The RGB Hexadecimal Notations — W3C (versión en inglés)
  3. Guía de Identidad Gráfica del Gobierno de México 2024-2030 — Gobierno de México
  4. Little CMS — Marti Maria (versión en inglés)
  5. Downloads: ICC profiles from ECI — European Color Initiative (versión en inglés)
  6. GRACoL2013_CRPC6.icc — ficha en el registro de perfiles — International Color Consortium (versión en inglés)
  7. CSS Color Module Level 5: Specifying Uncalibrated CMYK Colors — W3C (versión en inglés)
  8. Color Bridge Guide Coated — Pantone (versión en inglés)

Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.

Última revisión del contenido: · redactado y verificado por el equipo de Arteon

Preguntas frecuentes sobre pasar CMYK a HEX

¿Puedo escribir un número de color Pantone?

No. El campo espera cuatro números CMYK, y un número Pantone se refiere a una tinta ya mezclada. La guía Pantone Color Bridge da valores CMYK y HTML para los colores Pantone[8], y sus valores CMYK los puedes pasar aquí a código HEX.

¿Qué pasa si escribo solo tres números?

El campo del resultado se queda vacío y debajo aparece un aviso de que la entrada no se puede leer como color CMYK, con un ejemplo de cuatro números. Lo mismo ocurre con cinco números, porque el convertidor no adivina cuál sobra.

¿Sirve el código HEX de este convertidor para CSS?

Sí. El resultado tiene la forma #RRGGBB, que acepta cualquier navegador[2]. El botón Copiar resultado copia el código con la almohadilla incluida.

Captura de pantalla de la herramienta gratuita de Arteon: Pasa valores CMYK a un código HEX

Ayúdanos a mejorar nuestras herramientas

¿Tienes una idea para una función, has encontrado un error o quieres proponer otra herramienta? Escríbenos.