Che cos'è un codice colore esadecimale?

Un codice colore esadecimale rappresenta un colore con cifre esadecimali, come fanno CSS e la maggior parte degli strumenti di progettazione. In #3b82f6, ogni coppia di cifre corrisponde a un canale: 3b è il rosso, 82 è il verde e f6 è il blu, da 00 (disattivato) a ff (intensità massima). Un'eventuale quarta coppia imposta il valore alfa, ovvero l'opacità, quindi #3b82f6cc è lo stesso blu con un'opacità dell'80%. I codici in cui ogni coppia ripete la propria cifra possono essere abbreviati a tre o quattro cifre, quindi #ff8800 è anche #f80.

Descrizione dello strumento

Questo strumento consente di modificare un codice colore esadecimale coppia per coppia. Digita o incolla un codice, scegli un colore oppure incollane uno in RGB, HSL o un altro formato, quindi modifica le coppie del rosso, del verde, del blu e dell'alfa oppure l'opacità e visualizza il risultato su una griglia di trasparenza. Il colore modificato viene mostrato nei formati esadecimali utilizzati da CSS, Android e dal codice, tutti pronti per essere copiati.

Funzionalità

  • Modifica codici esadecimali di 3, 4, 6 e 8 cifre, con o senza #
  • Modifica ogni canale come coppia esadecimale di due cifre e l'alfa come coppia esadecimale o percentuale
  • Scegli un colore oppure incollane uno in RGB, HSL o un altro formato, mantenendo l'alfa
  • Visualizza in anteprima i colori trasparenti su una scacchiera
  • Ottieni il colore come HEX a 6 cifre, HEX a 8 cifre, HEX breve, rgb() o rgba(), #AARRGGBB e 0xAARRGGBB
  • Passa dalle cifre esadecimali minuscole a quelle maiuscole e viceversa
  • Funziona nel browser

Come funziona

Un codice di 3 o 4 cifre viene espanso raddoppiando ogni cifra, mentre un codice senza una coppia alfa è completamente opaco (ff). Una singola cifra digitata in un campo del canale viene considerata come 0 seguita da quella cifra, quindi f diventa 0f. Le percentuali di opacità vengono arrotondate al valore alfa più vicino da 0 a 255, quindi l'80% diventa cc (204). Il formato breve esiste solo quando entrambe le cifre di ogni coppia coincidono; in caso contrario, quel campo rimane vuoto.

Suggerimenti

  • CSS legge la coppia alfa per ultima (#RRGGBBAA), mentre le risorse colore Android e .NET la inseriscono per prima (#AARRGGBB), quindi per questi formati seleziona i campi ARGB.
  • Lascia l'alfa su ff per ottenere un semplice codice a 6 cifre; i campi a 8 cifre e ARGB continueranno comunque a mostrarlo per esteso.