Lección 7: Color

El modelo RGB es una mezcla de colores que predice como serán percibidos por los humanos respecto a los colores y luces experimentados en el mundo real. Esta orientado a pantallas digitales con tecnología compatible (CRT, LCD, plasma, OLED, quantum dots, etc.). En la impresión se utiliza el modelo CMYK, que no es equivalente ya que cada medio contiene unas particularidades propias. Sus siglas provienen de los 3 colores primarios que son mezclados: El rojo, verde y azul. O en inglés: Red, Green y Blue. Al ser mezclados producen toda la gama de colores que necesitamos para trabajar en Web. Podemos hacer uso de 255 frecuencias por canal, o 24 bites, que son en total 16.581.375 colores a utilizar.

RGB vs CMYK

body {
    /* Hexadecimal
         Sistema número en base 16: 0 1 2 3 4 5 6 7 8 9 A B C D E F

         Se dividen en pares de 2, que van desde 00 (mínimo) a FF (máximo) con un # en su inicio.

         Canal rojo: 12 (tiene un poco)
         Canal verde: 78 (cerca de la mitad)
         Canal azul: AF (cerca de su tope)
         Canal alfa (transpariencia) (opcional): No tiene
    */
    color: #1278AF;

    /*
         Canal transpariencia (opcional): 88 (Mitad de transpariencia)
         00 -> Sin transpariencia
         FF -> Totalmente transparente
    */
    color: #1278AF88;


    /* En caso de repetirse el dígito de sus pares pueden ser resumidos en solo 1
          #AAFF11 -> #AF1
          #11449944 -> #1494
          #000000 -> #000 (negro)
          #FFFFFF -> #FFF (blanco)
    */
    color: #1494;

    /* RGB
         Se dividen en 3 rangos de 0 a 255

         Canal rojo: 5 (tiene un poco)
         Canal verde: 128 (cerca de la mitad)
         Canal azul: 255 (a tope)
    */
    color: rgb(5, 128, 255);

    /* RGBA
         Se dividen en 4 rangos de 0 a 255

         Canal rojo: 5 (tiene un poco)
         Canal verde: 128 (cerca de la mitad)
         Canal azul: 255 (a tope)
         Canal alfa (transpariencia): 128 (cerca de la mitad)
    */
    color: rgba(5, 128, 255, 128);

    /* CSS Colores
         Alias de colores

         black, silver, gray, white, red... hasta 148 colores.
         Puedes ver todos en: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
    */
    color: rebeccapurple;


}

La más extendido es el hexadecimal por su simplicidad en su expresión y por contener el canal alfa, aunque técnicamente hablando no existe diferencia respecto al RGBA.

En conclusión: ante la duda usa siempre hexadecimal.

Los colores son una aproximación de como queremos que se muestren en el mundo físico o en la gran mayoría de los dispositivos; ¡no una certeza! Cada pantalla, sistema operativo, navegador web e impresora posé una calibración diferente. Te invito a comparar los colores de una web cualquiera en tu laptop y smartphone.

color

Aplica un color al texto.

.texto {
    color: #123;
}

background-color

Aplica un color al fondo.

.caja {
    background-color: red;
    /* Versión corta */
    background: red;
}

Opacity

Aplica transparencia a todo su contenido, desde el texto al fondo.

.caja {
    /* Rango entre 0 a 1, donde 0 aplica la máxima transparencia y 1 aplica la mínima. */
    opacity: 0.5;
    /* Versión corta */
    opacity: .5;
}

blend-mode

Nos ayuda a definir la transparencia a medida para indicar como queremos mezclar los colores. Si has trabajado con un software de edición de imágenes, como Photoshop, o vectores te resultarán familiar.

Disponemos de 2 estilos.

mix-blend-mode: Declara como debe mezclarse el color de su elemento con su padre.
background-blend-mode: Especifica su fusión con el fondo.

Ambos comparten los mismos valores.

.caja {
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
}

Si quieres saber en que se diferencias puedes encontrar una extensa explicación de cada una en MDN Web Docs.

Recientemente se añadió un color nuevo al estándar de CSS denominado rebeccapurple (#663399). La causa fue por un homenaje a Eric Meyer y por la triste perdida de su hija Rebecca que murió a causa de un largo cáncer, a las pocas horas de cumplir 6 añitos. Era su color favorito. No estaría demás recordar que detrás de la tecnología hay personas.

Actividad 1

A partir del siguiente texto.

Eastman Kodak Company (popularmente conocida como Kodak) es una compañía multinacional fundada el año 1892 en los Estados Unidos dedicada al diseño, producción y comercialización de equipamiento fotográfico. Durante más de cien años ha sido una empresa muy conocida por sus cámaras y películas fotográficas y actualmente está reorientando su actividad hacia dos mercados principales: la fotografía digital y la impresión digital, aunque hay pocas veces en que se orienta a la fotografía analógica en la actualidad. Desde 2020 comercializa además productos farmacéuticos.

Logra la siguiente web.

Actividad 2

Crea un documento secreto con tus datos personales. Toda la información sensible debe estar oculta con un marcado en negro. Puedes usar el siguiente ejemplo como inspiración.

Actividad top secret

Actividad 3

Crea el siguiente HTML y añade el CSS necesario para que se asemeje lo máximo posible. Eres libre que usar cualquier texto mientras mantengas la estructura. Evita todo aquello que no sepas realizar.

Imagen completa