Convertitore HEX in RGB

Cos'è un convertitore HEX in RGB?

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

Caratteristiche principali

Alternative al convertitore HEX in RGB

Esempi di conversione HEX in RGB

#FF5733

#3b82f6

#FF573380

#F73

Conversioni HEX → RGB comuni

Tabella di riferimento dei 10 codici hex più convertiti e i loro equivalenti RGB — primari puri, secondari puri e due colori brand del mondo reale dalla palette Tailwind.

Come usare il convertitore HEX in RGB

1. 1

   Incolli un codice hex nel campo HEX

   Rilasci qualsiasi valore hex nell'input HEX — con o senza il # iniziale, in abbreviazione a 3 cifre (#F73), forma completa a 6 cifre (#FF5733), abbreviazione alpha a 4 cifre (#F738) o forma completa alpha a 8 cifre (#FF5733CC). Lo strumento normalizza internamente tutte e cinque le forme di input nello stesso colore canonico. Le maiuscole/minuscole non contano (#ff5733 e #FF5733 vengono analizzati in modo identico). Caratteri non validi o conteggi cifre errati producono un errore inline silenzioso; l'hex valido aggiorna in tempo reale ogni altro campo di formato.

2. 2

   Legga la tupla RGB dal campo RGB

   Il campo RGB sotto il campo HEX mostra il valore rgb() corrispondente nella moderna sintassi con spazi di CSS Color 4: rgb(255 87 51) per un colore opaco, rgb(255 87 51 / 0.5) per uno con alpha. Ogni canale è un intero 0-255; l'alpha è normalizzato in 0-1. I valori sono bit-exact — parseInt('FF', 16) restituisce 255, senza aritmetica float coinvolta, quindi un round-trip a hex produce verbatim l'input originale.

3. 3

   Faccia clic su Copia per ottenere la stringa RGB

   Ogni scheda di formato ha un pulsante Copia sulla destra. Un clic e il valore finisce negli appunti — l'etichetta del pulsante passa brevemente a "Copiato!" per conferma. La stringa copiata è la sintassi canonica di CSS Color 4 (rgb(255 87 51)); se il target richiede la forma legacy con virgole, la conversione è meccanica (si sostituiscono gli spazi con , ). Per output specifico per piattaforma (SwiftUI, Compose, Flutter, Tailwind v4), usi la sezione Copia come codice sotto il picker.

4. 4

   Visibili anche: HSL, OKLCH, OKLAB, CMYK, colore named

   Lo stesso hex che incolla accende anche gli altri campi di formato — HSL per il CSS legacy, OKLCH e OKLAB per i design system percettivamente uniformi, HSV e HWB per i flussi di lavoro con color picker per designer, CMYK per le stime di stampa, e il colore CSS named più vicino per documentazione e prosa. Non resta mai vincolato a hex → RGB soltanto; se le serve anche la tripletta OKLCH da inserire in un blocco @theme di Tailwind v4, è lì nel campo OKLCH con il suo pulsante Copia.

5. 5

   Usi il picker per modifiche visive

   Sotto la griglia dei formati ci sono un quadrato SL + cursore di tonalità + cursore alpha per l'esplorazione visiva. Trascini un controllo qualsiasi e ogni campo di testo si aggiorna in tempo reale, inclusi l'HEX e l'RGB da cui è partito. Sui browser Chromium-based (Chrome, Edge, Brave) il pulsante EyeDropper attiva l'API nativa EyeDropper per campionare qualunque pixel sullo schermo, anche fuori dalla finestra del browser — utile quando vuole catturare un hex dall'UI di un'altra app senza fare prima uno screenshot.

Errori comuni HEX / RGB

Assumere che #F73 faccia left-pad in #000F73:
atteso: blu scuro rgb(0, 15, 115)
effettivo: arancione brillante rgb(255, 119, 51)

L'abbreviazione a 3 cifre duplica ogni cifra:
#F73 → #FF7733 → rgb(255, 119, 51)
Verificato dall'espansione live dello strumento mentre digita.

Saltare padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produce hex non valido a 5 caratteri.

Usare padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Hex valido a 6 caratteri; funziona correttamente per tutti i valori di canale 0-255.

Incollare hex CSS a 8 cifre nel legacy Android Color.parseColor():
#FF573380 interpretato come #AARRGGBB
→ colore sbagliato e alpha completamente sbagliato.

Usi il formato documentato della piattaforma target:
per Android Compose: Color(0xFFFF5733) con alpha come primo byte
per CSS: #FF573380 con alpha come ultimo byte
Non copi-incolli tra i due senza ri-ordinare.

Mediare RGB gamma-encoded direttamente:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Sembra oliva scuro, non giallo brillante.

Mediare in linear-RGB:
decodifica → linear-RGB → media → ricodifica → rgb(188, 188, 0)
Giallo visibilmente brillante, corrispondente a ciò che produce la mescola fisica di luce.

Chi usa HEX in RGB

Sviluppatori frontend che convertono hex Figma in chiamate RGB canvas

Figma esporta hex, ma CanvasRenderingContext2D.fillStyle accetta sia hex sia rgb() — e quando si fa aritmetica per canale (gradienti, blending, manipolazione di immagini), avere direttamente gli interi di canale è più veloce che riparseggiare l'hex ogni volta. Incolli l'hex una volta, copi la tupla rgb(255 87 51), la inserisca nella chiamata canvas. Zero codice di parsing hex necessario dalla sua parte.

Designer che traducono hex web in RGB Photoshop / Illustrator

Il selettore Color di Adobe prende interi 0-255 attraverso tre caselle di canale come input nativo. Incolli l'hex web in questo strumento, legga gli interi R / G / B, li digiti in Photoshop. Replica esattamente il colore web originale senza una deviazione screenshot-eyedropper. Utile quando un designer deve mostrare un colore web in un'app di layout Adobe pensata per la stampa.

Game dev che caricano hex brand in API RGB Unity / Unreal

Color di Unity e FLinearColor di Unreal prendono entrambi float normalizzati 0-1. Incolli l'hex brand, legga gli interi 0-255, divida per 255 (oppure usi l'output float normalizzato dello strumento tramite Copia come codice). La conversione è meccanica ma soggetta a errori se fatta a mano — digitare (255, 87, 51) in un costruttore che si aspettava (1.0, 0.341, 0.2) produce un colore bianco saturato e un tweet confuso. Lo strumento espone entrambe le forme.

Hardware dev che programmano strisce LED indirizzabili

WS2812, APA102 e altre strisce LED RGB indirizzabili prendono canali interi 0-255 per LED. Incolli l'hex brand per il display prodotto a parete, legga la tripletta RGB, la inserisca nell'array colori del controller. Utile quando il team marketing specifica un hex e l'ingegnere firmware ha bisogno dei valori di canale per una chiamata pixels.setPixelColor(i, r, g, b).

Ingegneri dell'accessibilità che auditano la leggibilità del colore brand

Il controllo di contrasto WCAG 2.1 prende input RGB internamente. Incolli l'hex brand, ottenga l'RGB corrispondente più il rapporto WCAG contro bianco e nero più il punteggio APCA Lc in una sola schermata. Se il colore brand non supera il minimo 4,5:1 per body text, il campo OKLCH percettivamente uniforme di fianco rende facile aumentare L finché il contrasto non passa senza perdere l'identità brand.

Designer che integrano template email con RGB inline

Alcuni client email (Outlook su Windows, vecchio Gmail mobile) analizzano hex in modo inconsistente negli attributi HTML — <font color="#FF5733"> può apparire come nero su certe piattaforme. Il fallback affidabile è la forma RGB equivalente rgb(255, 87, 51) inline. Incolli l'hex brand, copi la stringa RGB nella sintassi legacy con virgole (sostituzione manuale dalla forma moderna con spazi), la inserisca nell'attributo style del template email.

Sviluppatori che documentano token brand con entrambi i formati

La documentazione dei design token mostra spesso lo stesso colore in entrambi i formati: hex per il blocco di codice CSS, RGB per l'annotazione in prosa ("il rosso brand è #FF5733, equivalente a RGB 255 / 87 / 51"). Avere entrambi visibili affiancati consente a chi scrive la documentazione di copiare ciascuno in un solo passaggio invece di eseguire due strumenti. L'URL hash condivisibile permette anche ai lettori di cliccare verso il colore esatto in discussione.

Ingegneri QA che verificano snapshot di colore pixel

I test di regressione visiva spesso assertano valori RGB specifici contro pixel renderizzati (expect(pixel.r).toBe(255)). Quando la specifica viene fornita come hex ("i pulsanti devono apparire come #FF5733"), l'ingegnere QA ha bisogno degli interi RGB corrispondenti per scrivere l'asserzione. Incolli l'hex, legga R / G / B, lo inserisca nel test. La bit-exactness della conversione fa sì che il test non vada in flake per differenze di drift float.

Matematica e parsing HEX in RGB

parseInt(hex, 16) è l'implementazione in una riga

L'intera conversione hex-RGB entra in un'espressione per canale: parseInt(hex.slice(1, 3), 16) per R, parseInt(hex.slice(3, 5), 16) per G, parseInt(hex.slice(5, 7), 16) per B. parseInt di JavaScript con radix 16 legge una stringa hex in un intero decimale nell'intervallo 0-255 senza coinvolgimento di float. La direzione inversa (value.toString(16).padStart(2, '0')) è altrettanto in una riga — il padStart(2, '0') è il dettaglio facile da dimenticare che cattura valori di canale a singola cifra come 5 → '05' invece di '5'.

Espansione dell'abbreviazione: duplicazione cifre, non left-pad

La specifica CSS definisce l'abbreviazione a 3 cifre come #RGB che si espande in #RRGGBB duplicando ogni cifra. #F73 → #FF7733, *non* #000F73. La stessa regola si applica all'abbreviazione alpha a 4 cifre #RGBA → #RRGGBBAA. Questo è uno degli angoli più sbagliati della sintassi colore CSS — i principianti spesso assumono che #F73 faccia left-pad in #000F73, che produrrebbe un colore completamente diverso (un blu scuro desaturato anziché l'arancione brillante previsto). Il comportamento di espansione dello strumento rende la regola visibile a colpo d'occhio.

Alpha a 8 cifre: coppia finale, divisa per 255

L'hex a 8 cifre #RRGGBBAA codifica l'alpha come coppia hex a 2 cifre dopo la tripletta RGB, analizzata in modo identico e poi divisa per 255 per produrre un float 0-1. #FF573380 viene analizzato in alpha = 0x80 / 255 = 128 / 255 = 0,5019607843137255. La specifica CSS Color 4 usa 4 cifre decimali di precisione per l'output (/ 0.502); lo strumento segue la stessa convenzione. L'hex a 8 cifre è arrivato in tutti gli evergreen browser nel 2018 (Chrome 62, Firefox 49, Safari 9.1, Edge 79). Pre-2018 il fallback è rgba().

Output RGB: CSS Color 4 con spazi di default

Lo strumento emette rgb(255 87 51) (moderna con spazi) di default anziché la legacy rgb(255, 87, 51) (CSS 1 con virgole). Entrambe le forme sono valide e interscambiabili in ogni evergreen browser dal 2018. La sintassi moderna si allinea con le altre notazioni funzionali di CSS Color 4 (hsl(), lab(), oklch(), color()) che usano tutte separazione con spazi e slash per l'alpha. La forma legacy con virgole dista una sostituzione meccanica se la sua toolchain la richiede; rgba() è ancora il fallback giusto per contesti IE 9-11.

Fonte di verità interna OKLCH per stabilità del round-trip

Anche se questo spoke mira specificamente a HEX → RGB, il convertitore sottostante condiviso mantiene internamente il colore canonico come tripletta OKLCH. Significa che HEX → RGB → HSL → OKLAB → CMYK → HEX fa il round-trip senza drift float a ogni passo; i convertitori legacy che instradano attraverso HSL o sRGB come pivot accumulano errore di arrotondamento a ogni conversione. La scelta di OKLCH (rispetto a OKLAB) preserva la tonalità come asse stabile, quindi trascinare il cursore di tonalità non attraversa accidentalmente il grigio. Secondo il paper OKLAB di Björn Ottosson del 2020.

Codifica del canale: unsigned a 8 bit, gamma-encoded sRGB

Ogni canale RGB è un intero unsigned a 8 bit (0-255), codificato nello spazio colore sRGB definito da IEC 61966-2-1 (1996). I valori sono *gamma-encoded* — significa che la relazione tra valore di canale e luminosità percepita è non-lineare, seguendo la funzione di trasferimento sRGB piecewise (all'incirca un esponente 2,4 con un piccolo segmento lineare vicino allo zero). Questo conta quando si fa matematica colore: mediare due valori RGB nella loro forma gamma-encoded dà il punto medio percettivo sbagliato. Per blending colore corretto, prima si decodifica in linear-RGB (CSS Color 4 §11.2), poi si media, poi si ricodifica. Il modello OKLCH interno dello strumento rende tutto questo trasparente.

Best practice per i flussi di lavoro HEX / RGB

Usi la moderna sintassi RGB con spazi nel nuovo codice

rgb(255 87 51) (con spazi) e rgb(255 87 51 / 0.5) (slash per l'alpha) di CSS Color 4 sono le sintassi canoniche per il codice che spedisce nel 2025 e oltre. Le forme legacy con virgole rgb(255, 87, 51) e rgba(255, 87, 51, 0.5) sono ancora supportate ovunque ma stilisticamente deprecate in CSS Color 4. Usi la sintassi moderna nei nuovi fogli di stile; mantenga rgba() solo per contesti di fallback IE 9-11 dove serve davvero supporto legacy.

Verifichi il supporto dell'hex a 8 cifre prima di spedire codici con alpha

L'hex a 8 cifre con alpha (#FF573380) è arrivato in tutti gli evergreen browser nel 2018, ma i preprocessori CSS legacy e alcuni vecchi strumenti di design troncano silenziosamente la coppia alpha in hex a 6 cifre. Il risultato: un colore che ci si aspettava trasparente al 50% appare completamente opaco. Prima di spedire hex a 8 cifre in produzione, verifichi che il parser target lo gestisca; per target legacy, ripieghi sulla sintassi rgba(255, 87, 51, 0.5) esplicita, supportata fin da IE 9.

Non medi direttamente i canali RGB per la matematica colore

I canali RGB sono gamma-encoded — mediare due valori RGB dà il punto medio percettivo sbagliato. (255, 0, 0) mediato con (0, 255, 0) produce (127, 127, 0), un oliva scuro fangoso, non il punto medio visivamente brillante giallo che ci si aspetterebbe. Per blending colore corretto, prima si decodifica in linear-RGB (CSS Color 4 §11.2), poi si media, poi si ricodifica. Oppure, meglio, si lavora in OKLAB o OKLCH dove la distanza percettiva è uniforme — è esattamente ciò che fanno i generatori di palette dei design system.

Preferisca hex per la sorgente dei design token, RGB per l'hardware

Quando scrive una specifica di design token, preferisca hex (o OKLCH) come forma canonica — sono più tersi e si inseriscono puliti in JSON o YAML. Quando il codice consumer fa aritmetica per canale (chiamate canvas, manipolazione di immagini, driver LED hardware, attributi colore OpenGL), la forma intera RGB è più veloce da consumare. I due formati descrivono lo stesso colore; la scelta riguarda puramente chi legge e scrive, non la correttezza. La vista a campi simultanei di questo strumento rende entrambi ugualmente economici.

Documenti l'alpha esplicitamente nei nomi dei token

Quando un design token include alpha (es. un overlay al 50% di opacità), non seppellisca l'alpha in un hex a 8 cifre come #000000CC — divida il token in --color-overlay-base: #000000 e --color-overlay-alpha: 0.8, oppure usi la forma RGBA esplicita. Seppellire l'alpha in hex rende il token illeggibile a chiunque scorra il file e rende impossibili modifiche all'alpha per singolo token senza riparseggiare prima l'hex. La chiarezza del token system batte la brevità quando il costo è una variabile in più.

Usi l'URL hash per condividere decisioni di colore live

Ogni cambio di colore aggiorna l'hash URL come #hex=ff5733 automaticamente. Copi l'URL in un thread Slack o in una issue GitHub e chiunque lo apra atterra sullo stesso colore con la stessa tupla RGB. Questo è più affidabile che incollare una stringa hex in chat — i destinatari a volte fanno typo nei caratteri quando inseriscono manualmente il valore — e consente a un thread di design-review di riferirsi a un colore esatto invece di "l'arancione di cui abbiamo parlato martedì". L'hash non viene mai trasmesso al server.

Domande frequenti