Lección 4: 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.

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;
}

Recientemente se añadió un color nuevo al estándar de CSS: “rebeccapurple” (#663399). Fue en 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.

4-1 4-2 4-3

¿Te ayudo?

Comprame un café
  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario