Converti i valori RGB in HSV

Ultima revisione dei contenuti:

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.

Notazione HSV

Photoshop e Figma mostrano gradi e percentuali. OpenCV salva la tonalità da 0 a 179, e la saturazione e il valore da 0 a 255. Il modulo colorsys di Python e Unity restituiscono frazioni da 0 a 1.

in

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.

Cartoncini campione di colore disposti a cerchio su un tavolo chiaro
Cartoncini campione di colore disposti a cerchio, dal giallo ai verdi e ai blu e poi ai viola, ai rosa e ai rossi. La posizione di un cartoncino su una ruota così è il primo numero di HSV, la tonalità. Foto: Andy Brown, Unsplash.

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?

La tabella mostra il risultato del convertitore per dodici colori nelle tre notazioni del selettore Notazione HSV.
Colore e valori RGBCodice HEX0–360°, 0–100%OpenCV (0–179, 0–255)0–1
Rosso 255, 0, 0#FF0000hsv(0, 100%, 100%)0, 255, 2550, 1, 1
Arancione 255, 165, 0#FFA500hsv(38.8, 100%, 100%)19, 255, 2550.1078, 1, 1
Giallo 255, 255, 0#FFFF00hsv(60, 100%, 100%)30, 255, 2550.1667, 1, 1
Verde 0, 255, 0#00FF00hsv(120, 100%, 100%)60, 255, 2550.3333, 1, 1
Ciano 0, 255, 255#00FFFFhsv(180, 100%, 100%)90, 255, 2550.5, 1, 1
Blu 0, 0, 255#0000FFhsv(240, 100%, 100%)120, 255, 2550.6667, 1, 1
Viola 128, 0, 128#800080hsv(300, 100%, 50.2%)150, 255, 1280.8333, 1, 0.502
Magenta 255, 0, 255#FF00FFhsv(300, 100%, 100%)150, 255, 2550.8333, 1, 1
Bianco 255, 255, 255#FFFFFFhsv(0, 0%, 100%)0, 0, 2550, 0, 1
Grigio 128, 128, 128#808080hsv(0, 0%, 50.2%)0, 0, 1280, 0, 0.502
Nero 0, 0, 0#000000hsv(0, 0%, 0%)0, 0, 00, 0, 0
Blu 59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)109, 194, 2460.6034, 0.7602, 0.9647
OpenCV salva la tonalità come metà dell'angolo per farla stare in un byte, per questo il blu compare con 120 e non con 240. Saturazione e valore arrivano fino a 255 invece che a 100%[4].

Come cambia HSV se mescoli un colore con il bianco o con il nero?

La tabella mescola 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].
MescolanzaValori RGBCodice HEXHSV
75% di bianco206, 224, 253#CEE0FDhsv(217, 18.6%, 99.2%)
50% di bianco157, 193, 251#9DC1FBhsv(217, 37.5%, 98.4%)
25% di bianco108, 161, 248#6CA1F8hsv(217.3, 56.5%, 97.3%)
Colore di partenza59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)
25% di nero44, 98, 185#2C62B9hsv(217, 76.2%, 72.5%)
50% di nero30, 65, 123#1E417Bhsv(217.4, 75.6%, 48.2%)
75% di nero15, 33, 62#0F213Ehsv(217, 75.8%, 24.3%)
La tonalità resta a 217° in entrambe le direzioni. Le differenze di una frazione di grado vengono dall'arrotondamento dei canali RGB a numeri interi. Per questo una versione più chiara o più scura di un colore si prepara comodamente in HSV, cambiando un solo numero.

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.

  1. 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%.
  2. 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%.
  3. OpenCV

    Un'immagine a 8 bit, dopo cv2.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.
  4. Python e Unity

    colorsys.rgb_to_hsv riceve canali da 0 a 1 e restituisce il risultato nella stessa scala[7]. Anche Color.RGBToHSV di Unity dà H, S e V da 0 a 1[8]. A entrambi corrisponde l'opzione 0–1.

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?

Il campo accetta e converte ciascuno di questi formati, quindi non devi correggere nulla prima di incollare. La tabella mostra che cosa fa il convertitore con ognuno, e i risultati li ha calcolati lui stesso con l'opzione 0–360°, 0–100%.
Cosa scriviCosa mostra il convertitoreCome lo leggiamo
rgb(59, 130, 246)hsv(217.2, 76%, 96.5%)Prendiamo così com'è la notazione CSS con le parentesi.
59 130 246hsv(217.2, 76%, 96.5%)Bastano tre numeri separati da spazi, perché parentesi e virgole non servono.
R: 59, G: 130, B: 246hsv(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,9647hsv(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, 128hsv(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

  1. HSL and HSV — Wikipedia (in inglese)
  2. Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
  3. Scegliere i colori in Adobe Photoshop — Adobe
  4. Color conversions: RGB ↔ HSV — OpenCV
  5. Bootstrap Italia — _variables.scss — Designers Italia
  6. About color models — Figma Help Center
  7. colorsys — Conversions between color systems — Python Software Foundation
  8. Color.RGBToHSV — Unity
  9. Image file reading and writing: imread — OpenCV
  10. 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.

Screenshot dello strumento gratuito Arteon: Converti i valori RGB in HSV

Aiutaci a migliorare i nostri strumenti

Hai un’idea per una nuova funzione, hai trovato un errore o vuoi proporre un altro strumento? Scrivici.