HTML Color Codes

Selettore di colori HTML per formati RGB HEX HSL

Ottieni facilmente i codici colore HTML CSS per il tuo sito web utilizzando il selettore di colori, converti il formato colore tra HEX, RGB, HSL, HSV.

Seleziona un colore

Inserisci il valore del colore

Oppure usa il selettore HTML5

Colore selezionato

Rosso: 0
Verde: 255
Blu: 255
HUE (Gradi): 180
Luminosità: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Gruppo di colori: Cyan
Condividi:
Esempio di colore CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Stili più scuri e più chiari

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Ottieni colori da un'immagine

get pixel color from pic

Seleziona un colore e crea una palette

select color and create palette

Che cos'è un codice colore HTML?

I codici colore HTML sono un modo per specificare i colori nel web design. Questi codici vengono utilizzati in HTML e CSS per definire i colori di elementi come testo, sfondi, bordi e altro. Comprendere i codici colore HTML è essenziale per creare pagine web visivamente accattivanti e coerenti.

Ad esempio, il colore rosso può essere identificato utilizzando i seguenti formati:

Tipi di codici colore HTML


Codici colore esadecimali:
  • Il modo più comune per specificare i colori in HTML e CSS è utilizzare i codici colore esadecimali (hex). Un codice colore esadecimale è una combinazione di sei cifre di numeri e lettere definita dalla sua miscela di componenti rosso, verde e blu (RGB).
  • Formato: #RRGGBB
  • Esempio: #FF5733 rappresenta una tonalità di arancione.
  • Ogni coppia di cifre corrisponde all'intensità rispettivamente di rosso, verde e blu, su una scala da 00 (nessuna intensità) a FF (intensità massima).
Codici colore RGB:
  • I codici colore RGB definiscono i colori in base ai loro componenti rosso, verde e blu.
  • Formato: rgb(rosso, verde, blu)
  • Esempio: rgb(255, 87, 51) è l'equivalente RGB di #FF5733.
  • Ogni componente (rosso, verde e blu) è specificato come un numero compreso tra 0 e 255
Codici colore RGBA:
  • Simile a RGB, ma include un componente alfa per l'opacità.
  • Formato: rgba(rosso, verde, blu, alpha)
  • Esempio: rgba(255, 87, 51, 0.5) specifica lo stesso colore con un'opacità del 50%.
Codici colore HSL:
  • HSL sta per Tonalità (Hue), Saturazione (Saturation) e Luminosità (Lightness).
  • Formato: hsl(tonalità, saturazione%, luminosità%)
  • Esempio: hsl(9, 100%, 60%) è un altro modo per rappresentare il colore #FF5733
  • La tonalità è un grado sulla ruota dei colori (da 0 a 360), la saturazione è una percentuale (0% è scala di grigi, 100% è colore pieno), e la luminosità è anche una percentuale (0% è nero, 100% è bianco).
Codici colore HSLA:
  • Simile a HSL, ma include un componente alfa per l'opacità.
  • Formato: hsla(tonalità, saturazione%, luminosità%, alpha)
  • Esempio: hsla(9, 100%, 60%, 0.5) specifica lo stesso colore con un'opacità del 50%.
Utilizzo dei codici colore HTML:

I codici colore HTML possono essere utilizzati in varie proprietà CSS per stilizzare gli elementi web. Ad esempio:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

In questo esempio, il testo, lo sfondo e il bordo sono stilizzati utilizzando diversi tipi di codici colore HTML, tutti rappresentanti la stessa tonalità di arancione.

I codici colore HTML sono un aspetto fondamentale del web design, consentendo agli sviluppatori di definire e manipolare i colori con precisione. Comprendendo i codici colore esadecimali, RGB, RGBA, HSL e HSLA, puoi creare pagine web visivamente coerenti e accattivanti che migliorano l'esperienza dell'utente.