Converta valores RGB para HSV

Última revisão do conteúdo:

Escreva três canais RGB e o resultado HSV aparece enquanto escreve: rgb(59, 130, 246) corresponde a hsv(217.2, 76%, 96.5%). O seletor Notação HSV dá-lhe graus e percentagem como nos programas de design, a escala do OpenCV ou frações de 0 a 1, e o campo reconhece sozinho os canais escritos como frações.

Notação HSV

O Photoshop e o Figma mostram graus e percentagens. O OpenCV guarda o matiz de 0 a 179 e a saturação e o valor de 0 a 255. O colorsys do Python e o Unity devolvem frações de 0 a 1.

para

O que é HSV e em que difere de RGB?

O RGB descreve uma cor pela quantidade de luz vermelha, verde e azul que o ecrã emite num ponto. O HSV descreve a mesma cor com três grandezas mais fáceis de imaginar: o matiz (H), que vai de 0 a 360, a saturação (S), de 0 a 100%, e o valor (V), também chamado brilho. Por isso o modelo também se chama HSB[1].


Alvy Ray Smith publicou o modelo em 1978, e o próprio artigo conta que programas de pintura da Xerox PARC já o usavam havia quatro anos. Smith queria que as cores do ecrã se escolhessem como um pintor mistura tintas: pega num matiz puro e clareia-o com branco ou escurece-o com preto. No modelo dele, menos saturação significa mais branco, e menos valor significa mais preto[2].


No Seletor de Cores do Photoshop, o modelo aparece como HSB: o matiz é um ângulo de 0° a 360°, e a saturação e o brilho são percentagens[3]. Se precisar dos mesmos canais RGB em código hexadecimal, o conversor de RGB para HEX escreve-o por si.

Cartões de amostras de cor dispostos em círculo sobre uma mesa clara
Cartões de amostras de cor dispostos em círculo, do amarelo aos verdes e azuis e daí aos violetas, rosas e vermelhos. O lugar de um cartão numa roda assim é o primeiro número do HSV, o matiz. Foto: Andy Brown, Unsplash.

Se tiver a cor noutra notação, como OKLCH, Lab ou código de Android, o conversor de cores mostra-a de uma vez em todas as notações.

Como se converte RGB para HSV?

Divida cada canal por 255. O valor V é o maior dos três resultados. A saturação S é a diferença entre o maior e o menor, dividida pelo maior. O matiz H depende do canal mais forte[4].


Fórmula: V = máx, S = (máx − mín) ÷ máx e, quando o canal mais forte é o azul, H = 240° + 60° × (R − G) ÷ (máx − mín). Se o mais forte for o vermelho, o matiz conta a partir de 0°, e se for o verde, a partir de 120°[4].


Tomemos rgb(59, 130, 246). Divididos por 255, os canais valem 0,231, 0,510 e 0,965. O azul é o mais alto, logo o valor é 96,5%. A diferença entre o mais alto e o mais baixo é 0,733, e 0,733 ÷ 0,965 dá uma saturação de 76%.


O matiz é 240° + 60° × (0,231 − 0,510) ÷ 0,733, ou seja, 240° − 22,8° = 217,2°. A cor completa escreve-se hsv(217.2, 76%, 96.5%). Quando os três canais são iguais, a cor é um cinzento, a saturação é 0 e o matiz não tem significado[2], por isso o conversor escreve 0 nesse lugar.

Que valores HSV têm as cores básicas?

A tabela mostra o resultado do conversor para doze cores nas três notações que o seletor Notação HSV oferece.
Cor e valores RGBCódigo HEX0–360°, 0–100%OpenCV (0–179, 0–255)0–1
Vermelho 255, 0, 0#FF0000hsv(0, 100%, 100%)0, 255, 2550, 1, 1
Laranja 255, 165, 0#FFA500hsv(38.8, 100%, 100%)19, 255, 2550.1078, 1, 1
Amarelo 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
Azul 0, 0, 255#0000FFhsv(240, 100%, 100%)120, 255, 2550.6667, 1, 1
Roxo 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
Branco 255, 255, 255#FFFFFFhsv(0, 0%, 100%)0, 0, 2550, 0, 1
Cinzento 128, 128, 128#808080hsv(0, 0%, 50.2%)0, 0, 1280, 0, 0.502
Preto 0, 0, 0#000000hsv(0, 0%, 0%)0, 0, 00, 0, 0
Azul 59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)109, 194, 2460.6034, 0.7602, 0.9647
O OpenCV guarda o matiz como metade do ângulo para caber num byte, por isso o azul aparece com 120 e não com 240. A saturação e o valor vão até 255 em vez de 100%[4].

Que valores HSV têm os azuis do Padrão Digital de Governo?

O sistema de design do Governo Federal do Brasil usa como cor primária o azul #1351B4, parte de uma escala de azuis numerada de 5 a 90[5]. Passada por este conversor, a escala mostra a ideia de Smith: os tons claros perdem saturação com o valor perto do máximo, e os escuros guardam a saturação e perdem valor.
Token blue-warm-vividCódigo HEXValores RGBHSV
10#D4E5FF212, 229, 255hsv(216.3, 16.9%, 100%)
20#ADCDFF173, 205, 255hsv(216.6, 32.2%, 100%)
30#81AEFC129, 174, 252hsv(218, 48.8%, 98.8%)
40#5992ED89, 146, 237hsv(216.9, 62.4%, 92.9%)
50#2670E838, 112, 232hsv(217.1, 83.6%, 91%)
60#155BCB21, 91, 203hsv(216.9, 89.7%, 79.6%)
70#1351B419, 81, 180hsv(216.9, 89.4%, 70.6%)
80#0C326F12, 50, 111hsv(217, 89.2%, 43.5%)
90#071D417, 29, 65hsv(217.2, 89.2%, 25.5%)
O matiz fica perto de 217° em toda a escala, e dos tons 60 a 90 a saturação quase não se mexe. Em HSV, uma versão mais clara ou mais escura de uma cor de marca prepara-se mudando um único número.

Como usar o resultado no Photoshop, no Figma, no OpenCV e no Python?

Cada uma destas ferramentas escreve o HSV na sua própria escala. Para cada uma indicamos a opção do seletor Notação HSV que dá os números na mesma forma.

  1. Photoshop

    No Seletor de Cores, introduza o resultado nas caixas H, S e B. O matiz é aí um ângulo de 0° a 360°, e a saturação e o brilho são percentagens[3], por isso escolha 0–360°, 0–100%.

  2. Figma

    Na lista de modelos de cor por baixo dos controlos deslizantes, escolha HSB. O Figma aceita aí números inteiros: o matiz de 0 a 360, a saturação e o brilho de 0 a 100[6]. Arredonde o resultado de 0–360°, 0–100% às unidades.

  3. OpenCV

    Uma imagem de 8 bits, depois de cv2.cvtColor(imagem, cv2.COLOR_RGB2HSV), tem o matiz de 0 a 180, e a saturação e o valor de 0 a 255[4]. A opção OpenCV (0–179, 0–255) usa a mesma aritmética de inteiros. Comparámo-la com o OpenCV.js 4.10 nas 16 777 216 cores RGB, e todos os resultados coincidiram.

  4. Python e Unity

    colorsys.rgb_to_hsv recebe canais de 0 a 1 e devolve o resultado na mesma escala[7]. Color.RGBToHSV do Unity também dá H, S e V de 0 a 1[8]. Aos dois corresponde a opção 0–1.

Porque é que o OpenCV dá um matiz diferente daquele que o conversor mostra?

Quase sempre porque o OpenCV carrega a imagem com os canais pela ordem azul, verde, vermelho[9]. Converta uma imagem de cv2.imread com cv2.COLOR_BGR2HSV, e não com COLOR_RGB2HSV. A troca muda só o matiz: os mesmos três bytes 59, 130, 246 lidos como BGR dão no OpenCV um matiz de 11 em vez de 109, um laranja em vez de um azul.


A segunda armadilha é o vermelho. Está nas duas pontas da escala do matiz, por isso o vermelho puro tem no OpenCV o matiz 0, enquanto rgb(225, 0, 15), um vermelho com um toque de azul, já está em 178. O intervalo com que escolhe os píxeis vermelhos tem de cobrir as duas pontas da escala.

Que formatos RGB aceita este conversor?

O campo aceita e converte cada um destes formatos, por isso não precisa de corrigir nada antes de colar. A tabela mostra o que o conversor faz com cada um, e os resultados foram calculados por ele próprio com a opção 0–360°, 0–100%.
O que escreveO que o conversor mostraComo o lemos
rgb(59, 130, 246)hsv(217.2, 76%, 96.5%)Aceitamos a notação CSS com parênteses tal como está.
59 130 246hsv(217.2, 76%, 96.5%)Bastam três números separados por espaços, porque os parênteses e as vírgulas são dispensáveis.
R: 59, G: 130, B: 246hsv(217.2, 76%, 96.5%)Retiramos as letras dos canais, como as escreve um manual de marca, e ficamos com os números.
rgb(23.1%, 51%, 96.5%)hsv(217.2, 76%, 96.5%)Passamos nós os canais em percentagem para a escala de 0 a 255.
rgba(59, 130, 246, 0,5)hsva(217.2, 76%, 96.5%, 0.5)Lemos a opacidade escrita com vírgula decimal e passamo-la para o resultado em hsva.
0,2314 0,5098 0,9647hsv(217.2, 76%, 96.5%)Reconhecemos pela vírgula os canais escritos como frações de 0 a 1 e passamo-los para a escala de 0 a 255.
(59, 130, 246)hsv(217.2, 76%, 96.5%)Lemos o tuplo que o Python imprime, com os parênteses.
[59, 130, 246]hsv(217.2, 76%, 96.5%)Lemos o array do NumPy que o Python imprime, com os parênteses retos.
background-color: rgb(59, 130, 246);hsv(217.2, 76%, 96.5%)Aceitamos uma linha inteira colada da folha de estilos e tiramos dela a cor.
300, -20, 128hsv(329.9, 100%, 100%)Cortamos os valores fora do intervalo como faz o navegador: 300 passa a 255 e −20 passa a 0.

Converter RGB para outras unidades

RGB para HEXRGB para CMYKRGB para HSL

Fontes

  1. HSV — Wikipédia
  2. Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
  3. Escolher cores no Adobe Photoshop — Adobe
  4. Color conversions: RGB ↔ HSV — OpenCV
  5. Tokens de cor do Padrão Digital de Governo (@govbr-ds/core 3.7.0) — Governo Federal do Brasil
  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

Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.

Última revisão do conteúdo: · escrito e verificado pela equipa Arteon

Perguntas frequentes sobre converter RGB para HSV

Quando é melhor usar HSV em vez de RGB?

Quando escolhe ou ajusta uma cor pelo matiz, pela saturação e pelo brilho. A documentação do OpenCV diz que uma cor se descreve mais facilmente em HSV do que em BGR[10], e é por isso que aí se procuram em HSV os objetos de uma dada cor. As folhas de estilos e os ficheiros de imagem guardam a cor quase sempre em RGB ou HEX, pelo que a cor acabada volta no fim aos canais.

Qual é a diferença entre HSV e HSL?

Os dois partilham o mesmo matiz, mas calculam os outros dois números de maneira diferente. Em HSV o vermelho puro tem valor de 100%, hsv(0, 100%, 100%), e em HSL tem luminosidade de 50%, hsl(0, 100%, 50%). A versão HSL da mesma cor é dada pelo conversor de RGB para HSL.

Como converto um código HEX para HSV?

Passe o código para três canais no conversor de HEX para RGB e cole aqui o resultado. O campo aceita-o com o parêntese rgb() incluído.

O conversor mantém a opacidade?

Sim. Em graus e percentagem a opacidade passa para hsva(), e na notação 0–1 torna-se um quarto número. A notação OpenCV omite-a, porque uma imagem HSV no OpenCV tem só três canais.

Como passo de HSV para RGB?

Introduza o resultado no conversor de HSV para RGB. O botão Trocar ordem leva-o até lá com o resultado atual.

Captura de ecrã da ferramenta gratuita da Arteon: Converta valores RGB para HSV

Ajude-nos a melhorar as nossas ferramentas

Tem uma ideia para uma nova função, encontrou um erro ou quer sugerir outra ferramenta? Escreva-nos.