Softonic

Conversor de HSV para RGB

Etapa 1 / 2
Resultados

Photoshop, Figma e a maioria dos editores de imagem em nível de pixel expõem a cor como HSV (às vezes chamado de HSB) em vez de HSL. Insira um triplo HSV, matiz em graus, saturação e valor como porcentagens, e este conversor retorna canais RGB e HEX, para que uma cor escolhida em um editor de imagem possa ser inserida no CSS ou em um payload de API sem adivinhações.

Como converter HSV para RGB

  1. 1

    Insira os valores HSV

    Matiz 0-360°, saturação 0-100%, valor 0-100%.

  2. 2

    Leia os canais RGB

    Três inteiros de 0-255 mais um código HEX são exibidos abaixo.

  3. 3

    Visualize e ajuste

    Altere qualquer número inserido e converta novamente; RGB e HEX são atualizados para corresponder.

  4. 4

    Copie o formato que você precisa

    RGB para edição de imagens, HEX para CSS, triplo decimal para APIs.

HSV vs HSL: a diferença crucial

Tanto HSV quanto HSL são remapeamentos cilíndricos de RGB, mas posicionam o branco e a cor pura de maneira diferente.

Comparação lado a lado

Propriedade HSV / HSB HSL
Faixa de matiz 0-360° 0-360°
Saturação no topo S = 0 → cinzas S = 0 → cinzas
Cor pura total em V = 100%, S = 100% L = 50%, S = 100%
Branco puro em V = 100%, S = 0% L = 100% (qualquer H, S)
Preto puro em V = 0% (qualquer H, S) L = 0% (qualquer H, S)

Em HSV, você vai de matiz pura a preto diminuindo V. Em HSL, você vai de matiz pura a branco aumentando L, ou a preto diminuindo L. Isso significa que HSV é melhor para trabalho artístico em nível de pixel (onde “mais escuro” é intuitivo como “menos valor”), enquanto HSL é melhor para sistemas de design (onde “tintura” = L mais alto e “sombra” = L mais baixo tornam escadas de paleta fáceis).

A fórmula de conversão

Dado H em 0-360, S em 0-1, V em 0-1:

  1. C = V × S (croma)
  2. X = C × (1 − |((H / 60) mod 2) − 1|)
  3. m = V − C
  4. Escolha (R', G', B') por sextante, depois adicione m e multiplique por 255.

Referência rápida

HSV RGB HEX
hsv(0, 100%, 100%) (255, 0, 0) #FF0000
hsv(120, 100%, 100%) (0, 255, 0) #00FF00
hsv(240, 100%, 100%) (0, 0, 255) #0000FF
hsv(0, 0%, 50%) (128, 128, 128) #808080
hsv(210, 88%, 90%) (27, 136, 229) #1B88E5

Perguntas frequentes

Sim. “Valor” e “Brilho” são sinônimos neste modelo de cor. Aplicativos da Adobe escrevem como HSB, enquanto Gimp e outras ferramentas escrevem HSV, mas os números são idênticos.

O Figma usa HSB, não HSL. Converter HSB(210, 88%, 90%) diretamente como se fosse HSL dá uma cor diferente. Converta de HSB para RGB primeiro, depois para HSL se necessário.

Sim, a ferramenta mostra HSV, RGB e HEX simultaneamente. Altere qualquer um dos três e os outros dois se atualizam para corresponder.

Sim. Em HSV, V = 0 significa que nenhuma luz é emitida, então a cor é preta independentemente da matiz ou saturação. Em HSL, L = 0 também é preto, mas para obter branco é necessário L = 100, não V = 100.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Imagem Markdown

Gere a sintaxe de imagem do Markdown com texto alternativo, atributo de título e link opcional. Saída inline e em estilo de referência.

Ferramenta disponível em outros idiomas