Color en CSS

9.1 Formas de definir color en CSS

El color juega un papel importante en el diseño y desarrollo web. En CSS existen diversas formas de definir el color, que permiten a los desarrolladores crear interfaces atractivas e intuitivas. A continuación veremos las distintas maneras de definir colores en CSS, incluyendo modelos de color, transparencia, degradados y funciones estándar para trabajar con color.

Formas de definir color en CSS:

• Colores por nombre
• Colores hexadecimales
• RGB y RGBA
• HSL y HSLA
• Degradados
• Transparencia

9.2 Modelo de color RGB

El modelo RGB (Red Green Blue) define el color mediante la mezcla de los colores rojo, verde y azul. A cada color se le asigna un valor de 0 a 255.

Sintaxis:

    
      color: rgb(255, 0, 0); /* Rojo */
      color: rgb(0, 255, 0); /* Verde */
      color: rgb(0, 0, 255); /* Azul */
    
  

Ejemplo:

    
      body {
        background-color: rgb(240, 248, 255); /* Color de fondo: aliceblue */
      }
    
  

9.3 Modelo de color HEX

HEX (Hexadecimal) representa el color usando valores hexadecimales. Cada uno de los valores (RR, GG, BB) puede variar de 00 a FF.

Sintaxis:

    
      color: #ff0000; /* Rojo */
      color: #00ff00; /* Verde */
      color: #0000ff; /* Azul */
    
  

Ejemplo:

    
      h1 {
        color: #4CAF50; /* Verde */
      }
    
  

9.4 Modelo de color HSL

HSL (Hue, Saturation, Lightness) representa el color en forma de matiz, saturación y luminosidad. El matiz (Hue) se mide en grados (0-360), la saturación (Saturation) y la luminosidad (Lightness) en porcentajes (0%-100%).

Sintaxis:

    
      color: hsl(0, 100%, 50%); /* Rojo */
      color: hsl(120, 100%, 50%); /* Verde */
      color: hsl(240, 100%, 50%); /* Azul */
    
  

Ejemplo:

    
      p {
        color: hsl(210, 100%, 50%); /* Azul */
      }
    
  

9.5 Transparencia: RGBA y HSLA

Para añadir transparencia a los colores se utilizan los modelos RGBA y HSLA. En estos modelos se añade un cuarto parámetro — el canal alfa (Alpha), que define el nivel de transparencia de 0 (completamente transparente) a 1 (completamente opaco).

1. RGBA (Red, Green, Blue, Alpha):

Sintaxis:

    
      color: rgba(255, 0, 0, 0.5); /* Rojo semi-transparente */
      color: rgba(0, 255, 0, 0.3); /* Verde semi-transparente */
      color: rgba(0, 0, 255, 0.7); /* Azul semi-transparente */
    
  

Ejemplo:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Tomate semi-transparente */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Sintaxis:

    
      color: hsla(0, 100%, 50%, 0.5); /* Rojo semi-transparente */
      color: hsla(120, 100%, 50%, 0.3); /* Verde semi-transparente */
      color: hsla(240, 100%, 50%, 0.7); /* Azul semi-transparente */
    
  

Ejemplo:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Azul semi-transparente */
      }