Codificación del color

Sin valoraciones

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.

Cursos de Sketchup

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.

Codificación del color

Usando la codificación RGB en el selector de color de GIMP

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).

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.

Codificación del color

Colores RGB y notación hexadecimal

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.

Codificación del color

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.
12 Codificación CMYK

 

 

1. Sistema RGB (Red, Green, Blue)

El sistema RGB es utilizado principalmente para la representación de colores en dispositivos electrónicos como monitores, televisores y cámaras digitales. Los colores se crean mediante la combinación aditiva de los tres colores primarios: rojo, verde y azul.

  • Formato de Codificación: Cada color se representa mediante tres valores, uno para cada componente de color (rojo, verde, azul). Los valores suelen estar en el rango de 0 a 255 en un sistema de 8 bits por canal.
  • Ejemplo: Un color blanco puro se codifica como RGB(255, 255, 255), y un color negro puro como RGB(0, 0, 0).

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

El sistema CMYK se utiliza principalmente en la impresión a color. Los colores se crean mediante la combinación sustractiva de los cuatro colores de tinta: cian, magenta, amarillo y negro.

  • Formato de Codificación: Cada color se representa mediante cuatro valores porcentuales, uno para cada componente de color (cian, magenta, amarillo, negro).
  • Ejemplo: Un color cian puro se codifica como CMYK(100%, 0%, 0%, 0%).

3. Sistema HSL (Hue, Saturation, Lightness)

El sistema HSL representa colores en términos de su tono, saturación y luminosidad. Es útil para ajustar colores de manera intuitiva en programas de diseño gráfico.

  • Tono (Hue): Representa el tipo de color y se mide en grados de 0 a 360.
  • Saturación (Saturation): Representa la intensidad del color y se mide en porcentaje de 0% a 100%.
  • Luminosidad (Lightness): Representa la claridad o oscuridad del color y se mide en porcentaje de 0% a 100%.

4. Sistema HEX

El sistema HEX es una representación hexadecimal del sistema RGB y se utiliza comúnmente en diseño web y programación.

  • Formato de Codificación: Cada color se representa mediante un código hexadecimal de seis dígitos, donde los primeros dos dígitos representan el valor rojo, los siguientes dos el verde, y los últimos dos el azul.
  • Ejemplo: Un color blanco puro se codifica como #FFFFFF y un color negro puro como #000000.

5. Sistema LAB (CIE 1976 Lab*)

El sistema LAB es un modelo de color desarrollado para ser perceptualmente uniforme, lo que significa que las diferencias de color percibidas son uniformes en todo el espacio de color. Utiliza tres componentes:

  • L*: Representa la luminosidad, de 0 (negro) a 100 (blanco).
  • a*: Representa la posición entre verde y rojo.
  • b*: Representa la posición entre azul y amarillo.

6. Sistema Pantone (PMS – Pantone Matching System)

El sistema Pantone es un sistema de colores estandarizado utilizado en varias industrias, especialmente en la impresión. Cada color Pantone se identifica con un número único.

  • Aplicación: Utilizado para asegurar la consistencia del color en la impresión y la producción de materiales gráficos.

Consideraciones en la Codificación del Color:

  1. Contexto de Uso: Seleccionar el sistema de codificación adecuado dependiendo del medio (digital o impreso) y el propósito del diseño.
  2. Consistencia del Color: Utilizar perfiles de color y calibración de dispositivos para asegurar que los colores sean consistentes entre diferentes dispositivos y medios.
  3. Accesibilidad: Considerar la legibilidad y la visibilidad de los colores para personas con discapacidades visuales, como el daltonismo.

Compártelo en tus redes

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Valore este curso

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumimos que estás de acuerdo. VER