Convertitore RGB in HEX

Cos'è un convertitore RGB in HEX?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Caratteristiche principali

Alternative al convertitore RGB in HEX

Esempi di conversione RGB in HEX

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Conversioni RGB → HEX comuni

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

Come usare il convertitore RGB in HEX

1. 1

   Digiti o incolli una tupla RGB nel campo RGB

   Rilasci qualsiasi valore `rgb()` nell'input RGB — la moderna sintassi con spazi `rgb(255 87 51)`, quella legacy con virgole `rgb(255, 87, 51)`, con alpha tramite slash `rgb(255 87 51 / 0.5)` o tramite la forma `rgba(255, 87, 51, 0.5)`, oppure canali in percentuale `rgb(100% 34% 20%)`. Lo strumento normalizza tutte le forme di input nella stessa tupla RGB interna prima di calcolare l'hex. Caratteri non validi, interi fuori intervallo o sintassi malformata producono un errore inline silenzioso; l'RGB valido aggiorna in tempo reale ogni altro campo di formato.

2. 2

   Legga il codice hex dal campo HEX

   Il campo HEX sopra il campo RGB mostra il valore hex corrispondente: `#FF5733` per un colore opaco, `#FF573380` per uno con alpha (forma a 8 cifre). L'output usa di default cifre hex maiuscole per coerenza con la maggior parte delle brand guidelines; il minuscolo (`#ff5733`) dista solo una sostituzione meccanica ed è CSS ugualmente valido. La conversione è bit-exact — un round-trip RGB → HEX → RGB recupera verbatim la tupla originale senza drift float.

3. 3

   Faccia clic su Copia per ottenere la stringa hex

   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 include il `#` iniziale così da incollarsi direttamente in una regola CSS, in un campo colore Figma, in un'estensione hex SwiftUI o in un `colors.xml` Android. Per sintassi specifica per piattaforma (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, token `@theme` di Tailwind v4), usi la sezione Copia come codice sotto il picker.

4. 4

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

   Lo stesso RGB 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 solo a RGB → hex; se le serve anche la tripletta OKLCH per 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'RGB e l'HEX 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 una tupla RGB dall'UI di un'altra app senza fare prima uno screenshot, e poi leggere immediatamente l'hex.

Errori comuni RGB / HEX

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.

Saltare l'arrotondamento:
(0.5 * 255).toString(16) → '7f.8'
Produce hex non valido con un punto decimale.

Prima arrotondare all'intero:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Coppia hex valida a 2 cifre; corrisponde alla normalizzazione CSS Color 4.

Emettere hex con alpha iniziale di Android dentro CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (formato Android)
CSS lo interpreta come alpha=128, R=255, G=87, B=51 — colore completamente sbagliato.

Usi il formato documentato della piattaforma target:
per CSS: #FF573380 (alpha come ultimo byte)
per Android Compose: Color(0x80FF5733) (alpha come primo 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 RGB in HEX

Sviluppatori frontend che convertono RGB canvas in hex CSS

Le funzioni di disegno dell'API Canvas riportano e accettano colori come tuple RGB (`ctx.fillStyle = 'rgb(255 87 51)'`), ma il foglio di stile CSS circostante vuole variabili hex (`--color-fill: #FF5733`). Incollare l'RGB una volta produce l'hex corrispondente, pronto per essere inserito in una custom property CSS. Utile quando si estraggono colori brand da un grafico o una visualizzazione dati renderizzata con canvas per il riutilizzo in UI statica.

Designer che convertono RGB Photoshop in hex Figma

Il selettore Color di Adobe (in Photoshop, Illustrator e InDesign) riporta RGB come tre interi 0-255 attraverso tre caselle di canale. Figma, al contrario, mostra di default i valori colore come hex nei suoi pannelli di design. Incolli i tre interi Photoshop come `rgb(...)` qui, copi l'output hex, lo inserisca nel campo colore di Figma. Replica esattamente il colore Photoshop originale senza una deviazione screenshot-eyedropper.

Hardware dev che convertono RGB sensore LED in hex web

Le strisce LED indirizzabili, i sensori di colore e le camere RGB hardware riportano tutti i valori di canale come interi 0-255. Quando le letture devono guidare una dashboard web ("la lampada sta brillando attualmente di questo colore"), il codice hex corrispondente è ciò che l'attributo CSS `style="background: ..."` si aspetta. Incolli la tripletta RGB del sensore, copi l'hex, lo inserisca nel markup della dashboard.

Game dev che esportano Color Unity in mockup web

I costruttori `Color` di Unity e `FLinearColor` di Unreal prendono float normalizzati 0-1; moltiplicando ciascuno per 255 si ottengono gli interi RGB corrispondenti. Incolli l'`rgb(...)` risultante qui, copi l'hex, lo inserisca nel mockup web o nel sito marketing che deve corrispondere esattamente al colore accent in-game. La vista OKLCH simultanea espone anche la luminosità percettiva così che la palette del mockup possa essere regolata a mano per corrispondere ai livelli di luminosità del gioco.

Ingegneri dell'accessibilità che auditano colori brand Photoshop

Quando la brand style guide riporta i colori come triplette di interi RGB ("l'arancione brand è RGB 255 / 87 / 51") ma lo strumento di audit WCAG vuole codici hex, questo convertitore è il ponte. Incolli la tripletta RGB, copi l'hex, lo faccia passare attraverso l'audit. Anche i badge di contrasto WCAG e APCA in questo strumento mostrano il verdetto in un solo passaggio, così non deve saltare tra tre strumenti separati.

Email dev che migrano rgba() in hex a 8 cifre

L'HTML moderno dei client email supporta l'hex a 8 cifre (`#FF573380`) per i colori con alpha, ma i template legacy spesso memorizzano lo stesso valore come `rgba(255, 87, 51, 0.5)`. Incollando l'rgba() qui e leggendo l'output hex a 8 cifre la migrazione diventa meccanica. Il campo HEX mostra `#FF573380` per il caso al 50% di alpha; la forma legacy `rgba()` resta nel campo RGB per i contesti di fallback che la richiedono ancora.

Sviluppatori che documentano token brand con entrambi i formati

La documentazione dei design token mostra spesso lo stesso colore in entrambe le forme RGB e hex: hex per il blocco di codice CSS, RGB per l'annotazione in prosa ("l'arancione 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 separati. L'URL hash condivisibile permette anche ai lettori di cliccare verso il colore esatto in discussione.

Ingegneri QA che fanno assert sui colori dei pixel contro specifiche hex

I test di regressione visiva talvolta catturano i colori dei pixel come interi RGB (`expect(pixel).toMatchRgb([255, 87, 51])`), mentre la specifica sottostante è data in hex ("i pulsanti devono renderizzare come `#FF5733`"). Incollando l'RGB catturato qui si produce l'hex corrispondente, che l'ingegnere QA può confrontare direttamente con la specifica. La bit-exactness della conversione fa sì che il confronto non vada in flake per differenze di drift float.

Matematica e serializzazione RGB in HEX

toString(16).padStart(2, '0') è l'implementazione in una riga

L'intera conversione RGB-hex entra in un'espressione per canale: `value.toString(16).padStart(2, '0')`. Il `toString(16)` di JavaScript converte un intero decimale nella sua rappresentazione base-16. Il `padStart(2, '0')` è il dettaglio facile da dimenticare — senza, il valore di canale 5 verrebbe serializzato come `'5'` invece di `'05'`, producendo un hex a 5 caratteri non valido come `#55733` quando concatenato con gli altri canali. L'idioma standard è `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` seguito da un prefisso `'#'`.

Normalizzazione percentuale: × 255 / 100, poi arrotondamento

CSS Color 4 consente canali in percentuale in `rgb()`: `rgb(100% 34% 20%)` è equivalente a `rgb(255 87 51)`. La regola di normalizzazione è `Math.round(percentuale × 255 / 100)`. `50% × 255 / 100 = 127,5` arrotonda a 128 (banker's rounding lontano da ,5). La stessa regola si applica all'alpha quando espresso come percentuale (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Le forme intera e percentuale producono output hex identico dopo la normalizzazione; lo strumento espone la forma intera canonica nel campo RGB dopo la ri-normalizzazione.

Alpha in hex: moltiplica per 255, arrotonda, codifica come coppia finale

RGB con alpha (`rgb(255 87 51 / 0.5)`) emette hex a 8 cifre moltiplicando l'alpha per 255, arrotondando all'intero più vicino e codificando come 4ª coppia hex accodata dopo RGB. `0,5 × 255 = 127,5`, arrotondato a 128 = `0x80`, output `#FF573380`. La specifica CSS Color 4 usa banker's rounding (round-half-to-even) per questa conversione, che lo strumento segue. La forma a 8 cifre torna a 6 cifre quando alpha è esattamente 1 per evitare di sporcare i fogli di stile con coppie `FF` finali.

Input RGB: CSS Color 4 con spazi e legacy con virgole entrambi accettati

Il parser accetta sia la moderna forma CSS Color 4 `rgb(255 87 51)` sia la forma legacy CSS 1 `rgb(255, 87, 51)`. La forma 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 è ancora supportata in ogni evergreen browser e resta comune nelle code base più vecchie. Entrambe producono output hex identico; il serializzatore hex dello strumento non si cura di quale forma di input sia arrivata.

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

Anche se questo spoke mira specificamente a RGB → HEX, il convertitore sottostante condiviso mantiene internamente il colore canonico come tripletta OKLCH. Significa che RGB → HEX → HSL → OKLAB → CMYK → RGB fa il round-trip senza drift float per 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 RGB / HEX

Preferisca hex maiuscolo nelle brand guidelines, minuscolo nel codice

Le brand guidelines, i PDF marketing e la documentazione rivolta ai designer usano tipicamente hex maiuscolo (`#FF5733`) per coerenza visiva — l'aspetto in maiuscolo si legge come un identificatore brand. Il codice (CSS, JSON, sorgente JavaScript) usa tipicamente il minuscolo (`#ff5733`) per convenzione perché il minuscolo è più veloce da digitare e più comune nell'output autogenerato dei linter. Entrambi sono CSS valido e si analizzano in modo identico; ne scelga uno per ogni contesto e resti coerente. Lo strumento emette maiuscolo di default; una sostituzione meccanica passa al minuscolo.

Emetta hex a 8 cifre solo quando alpha < 1

Quando alpha è 1 (completamente opaco), torni alla forma a 6 cifre. Una coppia `FF` finale (`#FF5733FF`) è CSS legale ma sporca visivamente i fogli di stile e confonde alcuni parser legacy facendoli renderizzare male. La forma a 8 cifre dovrebbe apparire solo quando alpha è significativamente trasparente. Questo strumento segue quella regola automaticamente — i colori opachi emettono hex a 6 cifre, quelli con alpha emettono hex a 8 cifre, e il taglio è esatto (alpha = 1,0 emette 6 cifre; alpha = 0,9999 emette 8 cifre per preservare il dato).

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 le variabili CSS, RGB per l'hardware

Quando scrive una custom property CSS o un token di config Tailwind, preferisca hex — è più terso ed entra pulito 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.

Validi l'intervallo alpha prima di moltiplicare per 255

Quando implementa il suo convertitore RGB → hex-a-8-cifre, validi che il float alpha cada dentro `[0, 1]` prima dello step `× 255`. Un alpha fuori intervallo (negativo, o > 1) produce silenziosamente coppie hex non valide che alcuni parser accettano e altri rifiutano — una modalità di fallimento fragile. Faccia prima il clamp (`Math.max(0, Math.min(1, alpha))`), poi moltiplichi, poi arrotondi, poi codifichi in hex. Lo strumento espone un errore inline silenzioso per alpha fuori intervallo invece di emettere una stringa hex rotta.

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 lo stesso hex. Questo è più affidabile che incollare una tupla RGB in chat — i destinatari a volte fanno typo nelle virgole o tralasciano un canale 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