CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS color

La proprietà CSS color (CSS3): imposta il colore del testo

La proprietà color viene utilizzata per specificare il colore del testo all'interno di un elemento HTML. Supporta diversi formati: esadecimale, RGB(a), HSL(a), nomi di colore CSS e la parola chiave currentColor. È una delle proprietà fondamentali nella definizione dello stile visivo di una pagina web.

Sintassi

color: valore;

Significato dei valori principali:

  • esadecimale: Colore definito con un codice come #ff6347 (rosso).

  • RGB: Specifica il colore usando valori rosso, verde e blu. Es. rgb(255, 99, 71).

  • RGBA: Come RGB, ma con trasparenza (alpha). Es. rgba(255, 99, 71, 0.5).

  • HSL: Tonalità, saturazione, luminosità. Es. hsl(9, 100%, 64%).

  • HSLA: Come HSL, ma con trasparenza. Es. hsla(9, 100%, 64%, 0.5).

  • nome colore: Parola chiave CSS come red, blue, green, ecc.

  • currentColor: Usa il colore corrente ereditato (utile per effetti coerenti tra bordi, testo e ombre).


Esempio proprietà: color


Codice Esempio: color

CODE: CSSpreleva codice
  1. .color-example {
  2.   font-size: 20px;
  3.   padding: 15px;
  4.   border-radius: 8px;
  5.   margin-bottom: 15px;
  6. }
  7.  
  8. .hex { color: #ff6347; background: #fce9e6; }
  9. .rgb { color: rgb(60, 179, 113); background: #e8f9f0; }
  10. .hsl { color: hsl(210, 100%, 50%); background: #e6f0fc; }
  11. .named { color: purple; background: #f3e8fb; }

Contenuto Esempio: color

Esempio di utilizzo di color

In questo esempio, il colore del testo viene cambiato utilizzando diversi valori di colore CSS.


Testo con colore esadecimale: #ff6347
Testo con colore RGB: rgb(60, 179, 113)
Testo con colore HSL: hsl(210, 100%, 50%)
Testo con nome colore: purple

CSS e HTML per l'esempio con color:

  
  <style>
    .color-example {
      font-size: 20px;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 15px;
    }

    .hex { color: #ff6347; background: #fce9e6; }
    .rgb { color: rgb(60, 179, 113); background: #e8f9f0; }
    .hsl { color: hsl(210, 100%, 50%); background: #e6f0fc; }
    .named { color: purple; background: #f3e8fb; }
  </style>

  <div class="color-example hex">Testo con colore esadecimale: <code>#ff6347</code></div>
  <div class="color-example rgb">Testo con colore RGB: <code>rgb(60, 179, 113)</code></div>
  <div class="color-example hsl">Testo con colore HSL: <code>hsl(210, 100%, 50%)</code></div>
  <div class="color-example named">Testo con nome colore: <code>purple</code></div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies