Codificacion del color en Diseño Grafico

CODIFICACIÓN DEL COLOR

La codificación RGB (red, green, blue) o RVA (rojo, verde, azul) parte de los 3 colores primarios de luz y les da a cada uno de ellos un valor entre 0 y 255. Combinando estos colores consigue una amplia gama de tonos.

En los sistemas digitales son necesarios 24 bits para almacenar un gráfico en RGB. En los programas de dibujo de mapa de bits el modo RGB usa tres canales de 8 bits cada uno.

Los monitores de televisión y de ordenador usan RGB para representar el color, por lo que trabajar en modo RGB es la opción más adecuada para conseguir color de calidad en gráficos que deben ser vistos en pantalla (como los de una web). Los estándares de color en las páginas web usan también la codificación RGB para definir el color del texto, líneas o fondos.

Para una imagen destinada a imprimirse en una impresora de sobremesa puede usarse RGB porque la mayoría de ellas hace automáticamente la conversión. De todas formas hay que tener en cuenta que estas impresoras tienen cuatro tintas (cian, magenta, amarillo y negro) que no corresponden con los colores rojo, verde y azul.

Para una imagen destinada a imprimirse en offset el modo RGB es totalmente inadecuado pues saldrían 3 fotolitos (uno por canal) que no corresponderían con los colores usados en la imprenta.
RGB en decimal y hexadecimal

¿De qué forma se escriben los valores RGB en los sistemas informáticos?

Una forma habitual en los programas de diseño es dar los valores de cada uno de los componentes del RGB usando la numeración decimal entre 0 y 255. Cada componente tiene su valor numérico, en un rango de entre 0 (mínimo) a 255 (máximo). Un blanco total tendría el valor RGB de (255, 255, 255), un negro sería (0, 0, 0), un rojo de máxima saturación (255, 0, 0), y así todas las demás combinaciones.

Pero en algunos casos también es habitual escribirlo usando la numeración hexadecimal, fue el caso del HTML en la web hasta que llegaron las hojas de estilo. Y aún se sigue usando porque es una forma compacta de dar un valor de color con sólo 6 dígitos. Es por eso por lo que muchos selectores de color de programas de gráficos nos ofrecen también los valores RGB de un color en ese formato.

La escritura hexadecimal usa 16 dígitos ya que a los diez números convencionales (del 0 al 9) se le suman 6 letras del alfabeto latino (de la A a la F).

Curso de Diseño Gráfico

Color en la web, RGB en hojas de estilo

Las páginas web se definen técnicamente a través del lenguaje de marcado HTML, que define su estructura, y de las hojas de estilo CSS, que definen su apariencia. La evolución de estos estándares se lleva a cabo a través de las especificaciones y recomendaciones del W3Consortium, un consorcio formado por organizaciones, empresas e instituciones públicas y privadas comprometidas con el desarrollo de la web. En diciembre de 1996 el W3Consortium, conocido también como W3C, hizo la primera recomendación del estándar CSS-1 y en 1998 lo hizo para CSS-2. Progresivamente los principales navegadores implementaron la interpretación de estos estándares.

En los parámetros de CSS el color se define por RGB. Esto puede hacerse con dígitos hexadecimales o decimales. En el apartado «RGB en hexadecimal» se ha explicado que para establecer un color de forma hexadecimal se hace con 3 números formados por dobles dígitos, en HTML y en las hojas de estilo estos 6 números van siempre precedidos del signo «#». Para establecerlo con valores decimales se escribe «rgb» seguido de 3 valores decimales entre 0 y 255 contenidos entre paréntesis y separados por comas. A continuación se muestran algunos ejemplos.

Variando los valores en cada componente del RGB podemos representar numéricamente miles de colores. Usando el sistema hexadecimal cuanto más bajo es un valor (más próximo a 00) menos luz tenemos de una componente y cuanto más alto (más próximo a FF) tenemos más.
En diseño web los colores considerados safe, que se pueden reproducir fielmente sin cambios en distintos navegadores y sistemas operativos, son los que contienen los niveles de 00, 33, 66, 99, CC o FF, para cada color primario.

Un rojo oscuro puede ser representado como un #330000. Este rojo sería menos brillante que el rojo total (#FF0000). Un rojo con más brillo podría ser #660000. Igualmente haríamos con los otros componentes. Por ejemplo, un verde total, #00FF00, o un verde oscuro #003300. Un azul medio #000099 o un azul oscuro #000033.

Vea nuestro Máster en Diseño Gráfico

Modelos de Color Comunes en Diseño Gráfico

1. RGB (Red, Green, Blue)

• Descripción: El modelo de color RGB se basa en la mezcla aditiva de luz. Se utiliza principalmente para dispositivos electrónicos como pantallas de computadoras, televisores y teléfonos móviles. Los colores se crean combinando intensidades de luz roja, verde y azul.
• Rango de valores: Los valores en RGB se definen generalmente en una escala de 0 a 255, donde 0 significa la ausencia de color y 255 representa la máxima intensidad de ese color. Ejemplo:
  • RGB(255, 0, 0) = Rojo puro.
  • RGB(0, 255, 0) = Verde puro.
  • RGB(0, 0, 255) = Azul puro.
• Uso: Este modelo es adecuado para el diseño de interfaces web, gráficos digitales y cualquier medio que se visualice en pantalla.

2. CMYK (Cyan, Magenta, Yellow, Key/Black)

• Descripción: El modelo CMYK es sustractivo y se utiliza principalmente para la impresión, ya que simula la mezcla de tintas de colores. La representación de colores en CMYK se realiza combinando diferentes cantidades de cian, magenta, amarillo y negro.
• Rango de valores: Los valores de cada componente se definen en porcentajes (0% a 100%). Ejemplo:
  • CMYK(100%, 0%, 0%, 0%) = Cian puro.
  • CMYK(0%, 100%, 100%, 0%) = Rojo.
  • CMYK(0%, 0%, 100%, 0%) = Amarillo.
  • CMYK(0%, 0%, 0%, 100%) = Negro.
• Uso: Este modelo es utilizado para diseñar material impreso como folletos, carteles, revistas, etc.

3. HSL (Hue, Saturation, Lightness)

• Descripción: El modelo HSL se basa en tres componentes:
  • Tono (Hue): Representa el color base, medido en grados (de 0° a 360°).
  • Saturación (Saturation): Representa la intensidad o pureza del color, de 0% (gris) a 100% (color más puro).
  • Luminosidad (Lightness): Representa la cantidad de luz en el color, de 0% (negro) a 100% (blanco).
• Uso: El modelo HSL es útil cuando se desea modificar la tonalidad, la saturación y la luminosidad del color sin alterar sus componentes individuales, especialmente en aplicaciones de diseño gráfico donde se requieren ajustes rápidos de color.

4. Lab (CIELAB)

• Descripción: El modelo Lab es un sistema de color basado en cómo perciben los humanos los colores. Se divide en tres componentes:
  • L (Lightness): La luminosidad del color, de 0 (negro) a 100 (blanco).
  • a (Green to Red): El componente que varía entre el verde y el rojo.
  • b (Blue to Yellow): El componente que varía entre el azul y el amarillo.
• Uso: Es utilizado principalmente en la gestión del color en la industria de la impresión debido a su capacidad para representar colores de manera más uniforme y consistente en diferentes dispositivos.

5. Pantone

• Descripción: Pantone no es un modelo de color, sino un sistema de identificación, coincidencia y comunicación de colores. Se basa en una serie de muestras de colores estándar que pueden ser reproducidos de manera precisa mediante procesos de impresión.
• Uso: Es ampliamente utilizado en el diseño de materiales impresos donde la precisión del color es esencial. Pantone proporciona una serie de códigos de referencia para colores específicos, como Pantone 186 para un rojo vibrante.

Sistemas de Codificación de Color

1. Hexadecimal (Hex)

• Descripción: El sistema hexadecimal es un formato de codificación de color que se utiliza principalmente en el diseño web y la programación. Se basa en una representación numérica de los valores RGB.
• Estructura: Un código Hex consta de seis caracteres (usando números y letras), representando los valores de rojo, verde y azul.
  • Ejemplo: #FF5733
    • FF: Valor de rojo (255 en RGB).
    • 57: Valor de verde (87 en RGB).
    • 33: Valor de azul (51 en RGB).
• Uso: Se utiliza principalmente para la web y el diseño de interfaces digitales, ya que es fácil de manejar en CSS, HTML y otras tecnologías web.

2. RGB con valores porcentuales

• Descripción: Similar al sistema RGB estándar, pero en lugar de usar valores numéricos entre 0 y 255, los valores se representan como un porcentaje de la intensidad de los colores.
  • Ejemplo: rgb(100%, 0%, 0%) = Rojo puro.
  • Ejemplo: rgb(0%, 100%, 100%) = Rojo en su máxima saturación.
• Uso: Este formato es útil en aplicaciones de diseño web, especialmente en la creación de estilos CSS.

3. Nombre del color

• Descripción: Algunos colores se pueden representar por su nombre en lugar de sus valores numéricos. Por ejemplo, en CSS se puede usar nombres como «red», «blue», «green» y otros para definir el color.
• Uso: Este método es comúnmente usado en programación web, aunque no es tan preciso como los modelos RGB o hexadecimal.

Cómo Seleccionar y Usar los Colores Adecuadamente

1. Contexto del Proyecto:
   • Impresión: Si tu diseño es para impresión, utiliza el modelo CMYK para asegurar que los colores se vean como esperas al ser impresos.
   • Pantallas: Para diseños digitales y web, utiliza RGB o Hex. El modelo RGB es ideal para trabajos en pantallas, mientras que Hex es conveniente para la codificación en sitios web.
2. Pruebas de Color:
   • Realiza siempre pruebas de color. Lo que ves en la pantalla no siempre será lo que se verá en papel. El color puede variar dependiendo del dispositivo de visualización, la iluminación, y el tipo de impresora.
3. Uso de Herramientas de Diseño:
   • Utiliza herramientas como Adobe Photoshop, Illustrator o InDesign para manipular y visualizar colores en diferentes modelos.
   • Pantone es una excelente opción cuando se necesita una reproducción precisa de colores para impresión.
4. Consistencia en la Identidad Visual:
   • Mantén una paleta de colores consistente en tu diseño, especialmente en marcas o identidades visuales. Esto garantiza que el mensaje y la percepción del diseño sean claros y coherentes.