Converti i valori RGB in HSV
Scrivi tre canali RGB e il risultato HSV compare mentre scrivi: rgb(59, 130, 246) diventa hsv(217.2, 76%, 96.5%). Con il selettore Notazione HSV scegli gradi e percentuale come nei programmi di grafica, la scala di OpenCV o le frazioni da 0 a 1, e il campo riconosce da solo i canali scritti come frazioni.
Che cos'è HSV e in cosa si distingue da RGB?
RGB descrive un colore con la quantità di luce rossa, verde e blu che lo schermo emette in un punto. HSV descrive lo stesso colore con tre grandezze più facili da immaginare: la tonalità (H), un angolo sulla ruota dei colori con il rosso a 0°, il verde a 120° e il blu a 240°, la saturazione (S), cioè la quantità di colore, e il valore (V). Lo stesso modello si chiama spesso HSB, con B di brightness[1].
Alvy Ray Smith lo ha descritto nel 1978. Voleva che i colori sullo schermo si scegliessero come un pittore mescola i pigmenti: prende una tonalità pura e la schiarisce con il bianco o la scurisce con il nero. Nel suo modello, meno saturazione vuol dire più bianco e meno valore vuol dire più nero[2].
Nel Selettore colore di Photoshop il modello compare come HSB: la tonalità è un valore tra 0° e 360°, mentre saturazione e luminosità sono in percentuale[3]. Se ti servono gli stessi canali RGB come codice esadecimale, li scrive il convertitore da RGB a HEX.

Se hai il colore in un’altra notazione, per esempio OKLCH, Lab o codice Android, il convertitore colori lo mostra insieme in tutte le notazioni.
Come si converte RGB in HSV?
Dividi ogni canale per 255. Il valore V è il più grande dei tre risultati. La saturazione S è la differenza tra il più grande e il più piccolo, divisa per il più grande. La tonalità H dipende da quale canale è il più forte[4].
Formula: V = max, S = (max − min) ÷ max e, quando il canale più forte è il blu, H = 240° + 60° × (R − G) ÷ (max − min). Se domina il rosso la tonalità si conta da 0°, se domina il verde da 120°[4].
Prendiamo rgb(59, 130, 246). Divisi per 255, i canali valgono 0,231, 0,510 e 0,965. Il blu è il più alto, quindi il valore è 96,5%. La differenza tra il più alto e il più basso è 0,733, e 0,733 ÷ 0,965 dà una saturazione del 76%.
La tonalità è 240° + 60° × (0,231 − 0,510) ÷ 0,733, cioè 240° − 22,8° = 217,2°. Il colore completo si scrive hsv(217.2, 76%, 96.5%). Quando i tre canali sono uguali il colore è un grigio, la saturazione è 0 e la tonalità non ha significato[2], quindi il convertitore scrive 0 al suo posto.
Quali valori HSV hanno i colori di base?
| Colore e valori RGB | Codice HEX | 0–360°, 0–100% | OpenCV (0–179, 0–255) | 0–1 |
|---|---|---|---|---|
| Rosso 255, 0, 0 | #FF0000 | hsv(0, 100%, 100%) | 0, 255, 255 | 0, 1, 1 |
| Arancione 255, 165, 0 | #FFA500 | hsv(38.8, 100%, 100%) | 19, 255, 255 | 0.1078, 1, 1 |
| Giallo 255, 255, 0 | #FFFF00 | hsv(60, 100%, 100%) | 30, 255, 255 | 0.1667, 1, 1 |
| Verde 0, 255, 0 | #00FF00 | hsv(120, 100%, 100%) | 60, 255, 255 | 0.3333, 1, 1 |
| Ciano 0, 255, 255 | #00FFFF | hsv(180, 100%, 100%) | 90, 255, 255 | 0.5, 1, 1 |
| Blu 0, 0, 255 | #0000FF | hsv(240, 100%, 100%) | 120, 255, 255 | 0.6667, 1, 1 |
| Viola 128, 0, 128 | #800080 | hsv(300, 100%, 50.2%) | 150, 255, 128 | 0.8333, 1, 0.502 |
| Magenta 255, 0, 255 | #FF00FF | hsv(300, 100%, 100%) | 150, 255, 255 | 0.8333, 1, 1 |
| Bianco 255, 255, 255 | #FFFFFF | hsv(0, 0%, 100%) | 0, 0, 255 | 0, 0, 1 |
| Grigio 128, 128, 128 | #808080 | hsv(0, 0%, 50.2%) | 0, 0, 128 | 0, 0, 0.502 |
| Nero 0, 0, 0 | #000000 | hsv(0, 0%, 0%) | 0, 0, 0 | 0, 0, 0 |
| Blu 59, 130, 246 | #3B82F6 | hsv(217.2, 76%, 96.5%) | 109, 194, 246 | 0.6034, 0.7602, 0.9647 |
Come cambia HSV se mescoli un colore con il bianco o con il nero?
rgb(59, 130, 246) con il bianco e con il nero a passi del 25%, e ogni risultato l'ha calcolato questo convertitore. Si vede l'idea di Smith: il bianco abbassa la saturazione lasciando il valore quasi uguale, il nero abbassa il valore lasciando la saturazione quasi uguale[2]. Bootstrap Italia, il kit di Designers Italia per i siti della pubblica amministrazione, costruisce così le sue scale: il colore primario è hsb(210, 100, 80) e le varianti scure cambiano solo la luminosità[5].| Mescolanza | Valori RGB | Codice HEX | HSV |
|---|---|---|---|
| 75% di bianco | 206, 224, 253 | #CEE0FD | hsv(217, 18.6%, 99.2%) |
| 50% di bianco | 157, 193, 251 | #9DC1FB | hsv(217, 37.5%, 98.4%) |
| 25% di bianco | 108, 161, 248 | #6CA1F8 | hsv(217.3, 56.5%, 97.3%) |
| Colore di partenza | 59, 130, 246 | #3B82F6 | hsv(217.2, 76%, 96.5%) |
| 25% di nero | 44, 98, 185 | #2C62B9 | hsv(217, 76.2%, 72.5%) |
| 50% di nero | 30, 65, 123 | #1E417B | hsv(217.4, 75.6%, 48.2%) |
| 75% di nero | 15, 33, 62 | #0F213E | hsv(217, 75.8%, 24.3%) |
Come usare il risultato in Photoshop, Figma, OpenCV e Python?
Ognuno di questi strumenti scrive HSV nella propria scala. Per ciascuno indichiamo l'opzione del selettore Notazione HSV che dà i numeri nella stessa forma.
Photoshop
Nel Selettore colore inserisci il risultato nelle caselle H, S e B. La tonalità è lì un valore tra 0° e 360°, mentre saturazione e luminosità sono percentuali[3], quindi scegli 0–360°, 0–100%.Figma
Nell'elenco dei modelli di colore sotto i cursori scegli HSB. Figma accetta qui numeri interi: la tonalità da 0 a 360, saturazione e luminosità da 0 a 100[6]. Arrotonda quindi all'unità il risultato di 0–360°, 0–100%.OpenCV
Un'immagine a 8 bit, dopocv2.cvtColor(immagine, cv2.COLOR_RGB2HSV), ha la tonalità da 0 a 180 e saturazione e valore da 0 a 255[4]. L'opzione OpenCV (0–179, 0–255) usa la stessa aritmetica intera. L'abbiamo confrontata con OpenCV.js 4.10 su tutti i 16 777 216 colori RGB e ogni risultato coincideva.Python e Unity
Perché OpenCV dà una tonalità diversa da quella del convertitore?
Quasi sempre perché OpenCV carica l'immagine con i canali in ordine blu, verde, rosso[9]. Converti un'immagine di cv2.imread con cv2.COLOR_BGR2HSV, non con COLOR_RGB2HSV. Lo scambio cambia solo la tonalità: gli stessi tre byte 59, 130, 246 letti come BGR danno in OpenCV una tonalità di 11 invece di 109, un arancione al posto di un blu.
La seconda trappola è il rosso. Si trova a entrambe le estremità della scala della tonalità, quindi il rosso puro ha in OpenCV la tonalità 0, mentre rgb(225, 0, 15), un rosso con un filo di blu, è già a 178. L'intervallo con cui scegli i pixel rossi deve quindi coprire entrambe le estremità della scala.
Quali formati RGB accetta questo convertitore?
| Cosa scrivi | Cosa mostra il convertitore | Come lo leggiamo |
|---|---|---|
| rgb(59, 130, 246) | hsv(217.2, 76%, 96.5%) | Prendiamo così com'è la notazione CSS con le parentesi. |
| 59 130 246 | hsv(217.2, 76%, 96.5%) | Bastano tre numeri separati da spazi, perché parentesi e virgole non servono. |
| R: 59, G: 130, B: 246 | hsv(217.2, 76%, 96.5%) | Togliamo le lettere dei canali, come le scrive un manuale d'identità visiva, e teniamo i numeri. |
| rgb(23.1%, 51%, 96.5%) | hsv(217.2, 76%, 96.5%) | I canali in percentuale li portiamo noi sulla scala da 0 a 255. |
| rgba(59, 130, 246, 0,5) | hsva(217.2, 76%, 96.5%, 0.5) | Leggiamo l'opacità scritta con la virgola decimale e la riportiamo nel risultato come hsva. |
| 0,2314 0,5098 0,9647 | hsv(217.2, 76%, 96.5%) | Riconosciamo dalla virgola i canali scritti come frazioni da 0 a 1 e li portiamo sulla scala da 0 a 255. |
| (59, 130, 246) | hsv(217.2, 76%, 96.5%) | Leggiamo la tupla che stampa Python, parentesi comprese. |
| [59, 130, 246] | hsv(217.2, 76%, 96.5%) | Leggiamo l'array NumPy stampato da Python, parentesi quadre comprese. |
| background-color: rgb(59, 130, 246); | hsv(217.2, 76%, 96.5%) | Accettiamo una riga intera incollata dal foglio di stile e ne estraiamo il colore. |
| 300, -20, 128 | hsv(329.9, 100%, 100%) | Tagliamo i valori fuori scala come fa il browser: 300 diventa 255 e −20 diventa 0. |
Converti RGB in altre unità
Fonti
- HSL and HSV — Wikipedia (in inglese)
- Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
- Scegliere i colori in Adobe Photoshop — Adobe
- Color conversions: RGB ↔ HSV — OpenCV
- Bootstrap Italia — _variables.scss — Designers Italia
- About color models — Figma Help Center
- colorsys — Conversions between color systems — Python Software Foundation
- Color.RGBToHSV — Unity
- Image file reading and writing: imread — OpenCV
- Changing Colorspaces — OpenCV
Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.
Ultima revisione dei contenuti: · scritto e verificato dal team Arteon
Domande frequenti sulla conversione da RGB a HSV
Quando conviene usare HSV invece di RGB?
Quando scegli o regoli un colore in base a tonalità, saturazione e luminosità. La documentazione di OpenCV dice che un colore si descrive più facilmente in HSV che in BGR[10], ed è per questo che lì si cercano in HSV gli oggetti di un certo colore. I fogli di stile e i file di immagine salvano però il colore quasi sempre in RGB o HEX, quindi il colore finito torna alla fine ai canali.
Che differenza c'è tra HSV e HSL?
Hanno la stessa tonalità, ma calcolano diversamente gli altri due numeri. In HSV il rosso puro ha un valore del 100%, hsv(0, 100%, 100%), in HSL una luminosità del 50%, hsl(0, 100%, 50%). La versione HSL dello stesso colore te la dà il convertitore da RGB a HSL.
Come converto un codice HEX in HSV?
Trasforma il codice in tre canali con il convertitore da HEX a RGB e incolla qui il risultato. Il campo lo accetta con la parentesi rgb() compresa.
Il convertitore mantiene l'opacità?
Sì. In gradi e percentuale l'opacità passa in hsva(), e nella notazione 0–1 diventa un quarto numero. La notazione OpenCV la tralascia, perché un'immagine HSV in OpenCV ha solo tre canali.
Come torno da HSV a RGB?
Inserisci il risultato nel convertitore da HSV a RGB. Il pulsante Inverti ordine ti porta lì con il risultato attuale.

Aiutaci a migliorare i nostri strumenti
Hai un’idea per una nuova funzione, hai trovato un errore o vuoi proporre un altro strumento? Scrivici.