Colore in CSS

9.1 Modi per specificare il colore in CSS

Il colore gioca un ruolo importante nel web design e nello sviluppo web. In CSS, ci sono diversi modi per specificare il colore che permettono ai developer di creare interfacce attraenti e intuitive. Di seguito, esamineremo i diversi modi per specificare i colori in CSS, comprese le modelli di colore, trasparenza, gradienti e funzioni standard per lavorare con i colori.

Modi per specificare il colore in CSS:

• Colori nominati
• Colori esadecimali
• RGB e RGBA
• HSL e HSLA
• Gradienti
• Trasparenza

9.2 Modello di colore RGB

Il modello RGB (Red Green Blue) definisce il colore mescolando rosso, verde e blu. A ogni colore viene assegnato un valore da 0 a 255.

Sintassi:

    
      color: rgb(255, 0, 0); /* Rosso */
      color: rgb(0, 255, 0); /* Verde */
      color: rgb(0, 0, 255); /* Blu */
    
  

Esempio:

    
      body {
        background-color: rgb(240, 248, 255); /* Colore di sfondo: aliceblue */
      }
    
  

9.3 Modello di colore HEX

HEX (Hexadecimal) rappresenta il colore usando valori esadecimali. Ognuno dei valori (RR, GG, BB) può variare da 00 a FF.

Sintassi:

    
      color: #ff0000; /* Rosso */
      color: #00ff00; /* Verde */
      color: #0000ff; /* Blu */
    
  

Esempio:

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

9.4 Modello di colore HSL

HSL (Hue, Saturation, Lightness) rappresenta il colore in termini di tonalità, saturazione e luminosità. La tonalità (Hue) è misurata in gradi (0-360), mentre la saturazione (Saturation) e la luminosità (Lightness) sono misurate in percentuale (0%-100%).

Sintassi:

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

Esempio:

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

9.5 Trasparenza: RGBA e HSLA

Per aggiungere trasparenza ai colori si usano i modelli RGBA e HSLA. In questi modelli si aggiunge un quarto parametro – canale alpha (Alpha), che definisce il livello di trasparenza da 0 (completamente trasparente) a 1 (completamente opaco).

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

Sintassi:

    
      color: rgba(255, 0, 0, 0.5); /* Rosso semitrasparente */
      color: rgba(0, 255, 0, 0.3); /* Verde semitrasparente */
      color: rgba(0, 0, 255, 0.7); /* Blu semitrasparente */
    
  

Esempio:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Colore tomata semitrasparente */
      }
    
  

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

Sintassi:

    
      color: hsla(0, 100%, 50%, 0.5); /* Rosso semitrasparente */
      color: hsla(120, 100%, 50%, 0.3); /* Verde semitrasparente */
      color: hsla(240, 100%, 50%, 0.7); /* Blu semitrasparente */
    
  

Esempio:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Blu semitrasparente */
      }