CSS Academy · Lezione

Valori dei colori: nomi, hex, RGB, HSL

Imparate tutti i formati dei colori CSS: colori denominati, codici esadecimali, funzioni rgb() e hsl().

Lezione 1 di 413 passaggi

Valori dei colori: nomi, hex, RGB, HSL è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Formati dei colori CSS

CSS supporta diversi formati di colore. La scelta di quello più adatto dipende dal flusso di lavoro, dagli strumenti utilizzati e dalla necessità di gestire la trasparenza o manipolare i colori dinamicamente.

Colori con nome

CSS definisce oltre 140 colori con nome, come red, tomato e cornflowerblue. Sono ideali per la prototipazione rapida, ma offrono una precisione limitata.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

Colori esadecimali

I colori esadecimali utilizzano un # seguito da 6 cifre esadecimali (o 3 nella forma abbreviata). Ogni coppia di cifre rappresenta i canali rosso, verde e blu (0–255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

Esadecimale con alpha

Aggiunga una quarta coppia di cifre esadecimali (o una quarta cifra nella forma abbreviata) per specificare la trasparenza alpha:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

Colori RGB

rgb() accetta tre numeri interi (0–255) per i canali rosso, verde e blu. È molto leggibile e facile da gestire a livello programmatico.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

Colori RGBA

Aggiunga un quarto parametro (0–1) a rgb() per specificare la trasparenza alpha. È equivalente alla sintassi più recente di rgb() con la barra.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

Colori HSL

hsl() definisce il colore tramite tonalità (0–360°), saturazione (0–100%) e luminosità (0–100%). È molto più intuitivo per creare palette e varianti di colore.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

Colori HSLA

Come rgba(), hsla() aggiunge un canale alpha. Il CSS moderno consente invece di utilizzare un separatore con barra:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

Creare varianti di colore con HSL

HSL è particolarmente utile per generare tinte e sfumature. Mantenga costanti tonalità e saturazione e modifichi la luminosità:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

Parola chiave currentColor

currentColor è un valore dinamico uguale al valore corrente della proprietà color dell'elemento. Lo utilizzi per fare in modo che bordi, ombre o riempimenti SVG ereditino automaticamente il colore del testo.

<a href="#">Link with currentColor border</a>

Parola chiave transparent

La parola chiave transparent equivale a rgba(0,0,0,0) — completamente trasparente. È utile per gli effetti al passaggio del mouse, quando si passa gradualmente dalla trasparenza a un colore.

<button>Transparent background</button>

Verifica rapida

Quale formato di colore rende più semplice creare sfumature più chiare e più scure della stessa tonalità?

Rispondi nella lezione interattiva

Riepilogo

CSS offre formati di colore con nome, esadecimali, RGB e HSL. HSL è ideale per la manipolazione programmatica dei colori. Tutti i formati accettano un canale alpha per la trasparenza. currentColor e transparent sono parole chiave speciali molto utili.

Gratis per iniziare

Impara CSS con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 40
Lezioni: 159

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Valori dei colori: nomi, hex, RGB, HSL» è gratuita?

Sì — il testo completo di «Valori dei colori: nomi, hex, RGB, HSL» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Valori dei colori: nomi, hex, RGB, HSL»?

Imparate tutti i formati dei colori CSS: colori denominati, codici esadecimali, funzioni rgb() e hsl(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Valori dei colori: nomi, hex, RGB, HSL»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy