Conversor de modelos de color (RGB, HSL, HSV, CMYK)

Introduce un código de color HEX o elige uno con el selector de color para calcular al instante sus valores equivalentes en RGB, HSL, HSV (HSB) y CMYK, todos a la vez.

En qué se diferencian los modelos de color

Modelo	Descripción	Uso habitual
RGB	Un modelo de color aditivo que mezcla los tres colores primarios de la luz (rojo, verde y azul), cada uno en una escala de 0 a 255.	Pantallas, desarrollo web (CSS) y el formato base de la mayoría de editores de imagen.
HSL	Representa un color mediante el matiz, la saturación y la luminosidad. Se aproxima más a cómo los humanos describen el color de forma intuitiva.	La función `hsl()` de CSS y el ajuste de matiz/saturación en herramientas de paletas de color.
HSV/HSB	Representa un color mediante el matiz, la saturación y el valor (brillo). Se parece a HSL pero define el tercer eje de forma distinta.	Los selectores de color de herramientas de diseño como Photoshop e Illustrator.
CMYK	Un modelo de color sustractivo que superpone cuatro tintas: cian, magenta, amarillo y una plancha clave (negro).	Diseño de impresión y autoedición (DTP), donde el color se reproduce con tinta sobre papel.

Qué significa convertir entre modelos de color

Convertir entre modelos de color consiste en expresar un mismo color como cifras en sistemas distintos: RGB, HSL, HSV (también llamado HSB) y CMYK. El RGB sigue el modo en que una pantalla emite luz; el HSL y el HSV describen el color según ejes más cercanos a la percepción humana —tono, saturación y luminosidad o valor—; el CMYK sigue la superposición de las tintas de imprenta. El color es el mismo, pero el eje desde el que se mira es completamente distinto.

Dele a esta herramienta un solo color, ya sea como código hexadecimal o mediante el selector, y lo convertirá de una vez a los cuatro sistemas. Eso encaja con las situaciones que una conversión aislada no cubre: cambiar la notación empleada en CSS, conciliar cómo especifican el color distintas herramientas de diseño o comprobar los valores CMYK para imprenta, es decir, los casos en que quiere ver varios modelos en paralelo.

Cómo usar el conversor

Introduzca un código hexadecimal Se admite con o sin la almohadilla inicial, y también la forma abreviada de tres dígitos como #f60.
O elija un color con el selector Lo que escoja se refleja automáticamente en el campo del código hexadecimal.
Compruebe el color en la vista previa La muestra le permite confirmar a simple vista que el valor introducido se ha interpretado como pretendía.
Consulte los resultados en RGB, HSL, HSV y CMYK Las cifras de los cuatro sistemas aparecen a la vez.
Use los valores que necesite Trasládelos a la función hsl() de CSS, compruebe los valores CMYK para imprenta o lo que requiera la tarea.

Consejos para aprovecharla mejor

El campo HEX acepta códigos con o sin el símbolo `#` inicial, tanto en formato abreviado de 3 dígitos (por ejemplo, `#f60`) como en el de 6 dígitos.
Cualquier color que elijas con el selector se refleja automáticamente en el código HEX, de modo que puedes elegir colores visualmente mientras compruebas los valores numéricos exactos.
Si quieres definir un color de fondo o de texto en CSS con la función `hsl()`, puedes usar directamente los valores HSL mostrados aquí en el formato `hsl(H, S%, L%)`.
Al preparar archivos para impresión, ten en cuenta que los valores CMYK mostrados aquí son una conversión simplificada; los valores reales que utiliza el perfil ICC de una imprenta pueden diferir ligeramente.

Cuándo resulta útil

Cambiar cómo se escribe un color en CSS

Convierta un código hexadecimal indicado en una maqueta a los valores HSL que necesita cuando quiere retocar el tono o la saturación mediante la función hsl() de CSS.

Comprobar valores CMYK orientativos para imprenta

Antes de reutilizar en material impreso una paleta elegida para la web, mirar el equivalente en CMYK hace más fácil advertir la diferencia entre pantalla y papel. Cuando importe la fidelidad, confirme la conversión por separado con el perfil ICC de la imprenta.

Llevar un color de una herramienta de diseño a otra

Photoshop, Illustrator y programas similares suelen mostrar su selector en HSV (HSB), así que cuando las cifras parezcan no coincidir con un código de color web, esta herramienta muestra la correspondencia.

Afinar una paleta

Descomponer un color en tono, saturación y luminosidad facilita mucho ver en qué dirección ajustarlo: mantener el tono y cambiar solo el brillo, por ejemplo. Para construir paletas detalladas conviene emplear además un generador específico.

Términos de los modelos de color

RGB: Modelo aditivo que expresa el color mezclando luz roja, verde y azul. Cada componente se da como un número de 0 a 255 y es la forma básica de especificar color en pantallas y en CSS.
HSL: Modelo que expresa el color mediante tono, saturación y luminosidad. Frente a las cifras desnudas del RGB, hace mucho más intuitivo ajustar el brillo y la viveza.
HSV (HSB): Modelo que expresa el color mediante tono, saturación y valor o brillo. Se parece al HSL pero define de otro modo el tercer eje, y está muy extendido en los selectores de herramientas como Photoshop.
CMYK: Modelo sustractivo que expresa el color superponiendo cuatro tintas: cian, magenta, amarillo y la plancha clave, es decir, el negro. Es el modelo con el que trabaja el diseño para imprenta.
Tono: El tipo de color —rojo, verde, azul y demás— dado como un ángulo de 0 a 360 grados. Es el eje que comparten HSL y HSV, y recorre un círculo desde el rojo pasando por amarillo, verde, azul y violeta hasta volver al rojo.
Saturación: Grado de viveza de un color. Cerca del 0 por ciento se aproxima al gris; cerca del 100 por ciento se convierte en un color puro y vivo.
Luminosidad y valor: La luminosidad del HSL describe cuánto negro o blanco hay mezclado, mientras que el valor del HSV describe cuánto negro se mezcla en el color. Es el caso clásico de un mismo color que significa cifras distintas según el modelo.
Plancha clave (K): El componente de tinta negra en CMYK. Con cian, magenta y amarillo por sí solos cuesta lograr un negro profundo, de modo que en imprenta se aplica tinta negra aparte para que el texto y las zonas oscuras queden nítidos.

Preguntas frecuentes

RGB representa un color mezclando los tres colores primarios de la luz (rojo, verde y azul), cada uno en una escala de 0 a 255, y es el formato básico que utilizan internamente los ordenadores. HSL expresa ese mismo color con tres ejes más cercanos a la intuición humana (matiz, saturación y luminosidad), lo que facilita ajustes como "un poco más claro" o "un poco más vivo".

HSV y HSL comparten los mismos ejes de matiz (H) y saturación (S), pero definen el tercer eje de forma distinta. La luminosidad de HSL describe cuánto se mezcla un color hacia el negro o el blanco, mientras que el valor de HSV describe solo cuánto negro se ha mezclado en el color. Cuando quieres elegir un color vivo y casi puro, HSV suele resultar más intuitivo, por lo que es el modelo usado en los selectores de color de herramientas como Photoshop.

En teoría, mezclar a partes iguales tinta cian, magenta y amarilla debería producir negro, pero las tintas reales nunca son perfectamente puras, así que la mezcla de las tres solo produce un marrón apagado. Para conseguir negros nítidos y profundos (sobre todo para el texto), la industria de la impresión añade una tinta negra dedicada, la plancha clave, denotada como K.

Las pantallas crean color mediante mezcla aditiva, combinando luz roja, verde y azul, por lo que RGB, basado en los primarios de la luz, encaja de forma natural. La impresión, en cambio, funciona por mezcla sustractiva, superponiendo tintas sobre papel que absorben la luz, por lo que se usa CMYK, los primarios de tinta más el negro. Como los dos procesos se basan en principios distintos, los colores en pantalla y en el papel impreso no siempre coinciden exactamente, una diferencia conocida como gama de color (gamut).

A propósito — la historia detrás de estos modelos de color

La idea de la mezcla aditiva de color detrás de RGB se remonta a la teoría del color del siglo XIX, pero solo se generalizó en los gráficos por ordenador a partir de la década de 1970. Los primeros televisores y monitores en color creaban el color iluminando fósforos rojos, verdes y azules en un tubo de rayos catódicos, así que RGB se adoptó como el modelo numérico que se correspondía directamente con ese hardware físico.

Tanto HSL como HSV fueron ideados por investigadores de gráficos por ordenador en las décadas de 1970 y 1980 para resolver un problema concreto de usabilidad: ajustar directamente los números RGB no resulta intuitivo para las personas. HSV en particular es conocido por haberse formalizado en un artículo de 1978 de Alvy Ray Smith, quien más tarde se convirtió en uno de los cofundadores de Pixar.

CMYK evolucionó junto con la historia de la tecnología de impresión y proviene de una técnica llamada impresión a cuatro tintas (four-color process printing). Como el cian, el magenta y el amarillo por sí solos tienen dificultades para reproducir un negro profundo, se añadió una plancha clave (negro) dedicada para resolver esa limitación propia de la impresión. CMYK sigue siendo hoy el estándar en la impresión offset, las impresoras de inyección de tinta y muchas otras tecnologías de impresión.

Ver todas las curiosidades