T
color-converter design-tools css frontend-development

Conversor de Cores Profissional: Domine Todos os Espaços de Cores sem Esforço

Converta entre HEX, RGB, HSL, HSV e CMYK com precisão. A ferramenta essencial para designers e desenvolvedores front-end.

2026-04-09 Usar esta ferramenta

O Que São Modelos de Cor?

Modelos de cor são sistemas matemáticos que descrevem cores como tuplas de números. Em vez de dizer "aquele laranja-avermelhado quente", um designer pode comunicar #FF4500, rgb(255, 69, 0) ou hsl(16, 100%, 50%)—sem ambiguidade, reproduzível e transferível entre ferramentas, equipes e mídias.

A necessidade de descrever cores com precisão é antiga. Em 1666, Isaac Newton passou luz solar branca por um prisma de vidro e produziu um espectro de arco-íris, demonstrando que a luz "branca" contém todas as cores visíveis. Mas um espectro por si só não nos diz como misturar ou especificar uma cor de forma sistemática.

O primeiro sistema prático de ordenação de cores foi criado por Albert H. Munsell em 1905. Ele organizou as cores em três eixos—Matiz (Hue), Valor (Value) e Croma (Chroma)—em uma estrutura arbórea perceptual. Seu sistema foi o ancestral direto de HSL e HSV.

A base científica moderna chegou em 1931, quando a Comissão Internacional de Iluminação (CIE) publicou o espaço de cor CIE 1931 XYZ—a primeira descrição matematicamente rigorosa e independente de dispositivo da percepção de cor humana, derivada de experimentos com observadores humanos. Todos os modelos de cor usados na computação remetem fundamentalmente a esse padrão.

A era digital trouxe modelos impulsionados pelo hardware. Monitores CRT misturam pontos de fósforo vermelho, verde e azul (RGB). Impressoras jato de tinta pulverizam tintas ciana, magenta, amarela e preta (CMYK). Cada mídia precisou de seu próprio modelo, e a necessidade de converter entre eles deu origem a ferramentas como a que você está usando agora.

RGB —— A Linguagem das Telas

RGB (Vermelho, Verde, Azul) é um modelo de cor aditivo. Adicionar luz aumenta o brilho; os três canais no máximo (255, 255, 255) produzem branco; todos em zero produzem preto. Isso corresponde ao funcionamento de monitores, televisores e telas de smartphones—milhões de pixels, cada um um conjunto de subpixels vermelho, verde e azul emitindo luz em intensidades variadas.

Cada canal vai de 0 a 255 (8 bits, 256 níveis). Isso dá 256³ = 16.777.216 cores distintas—comumente chamadas de "cor verdadeira de 24 bits". Para telas HDR, 10 bits por canal (1024 níveis) está se tornando o padrão.

RGB é a linguagem nativa de CSS, APIs canvas, shaders WebGL e bibliotecas de processamento de imagens. Seu ponto fraco é não ser intuitivo perceptivamente—se você quer um azul ligeiramente mais claro, não sabe quais números ajustar.

HEX —— A Notação Compacta da Web

HEX é simplesmente RGB codificado em notação hexadecimal. Cada canal (0–255 decimal) torna-se uma string hexadecimal de dois dígitos (00–FF). A cor completa recebe o prefixo #.

255 decimal = FF hex
128 decimal = 80 hex
  0 decimal = 00 hex

Assim, rgb(255, 128, 0) torna-se #FF8000. O formato é compacto, fácil de copiar e colar, e onipresente em HTML, CSS e paletas de ferramentas de design.

Existe uma forma abreviada quando ambos os dígitos de cada canal são idênticos: #FF8800 → #F80. CSS também suporta a forma de 8 dígitos #RRGGBBAA para cores com transparência alfa (ex.: #FF800080 = laranja 50% transparente).

HEX é conveniente para desenvolvedores, mas não oferece mais clareza semântica que RGB—ajustar um valor ainda é tentativa e erro sem um seletor de cores.

HSL —— Projetado para Humanos

HSL (Matiz, Saturação, Luminosidade) reorganiza o espaço de cor de uma forma que mapeia a intuição humana:

  • Matiz H: O ângulo da roda de cores, 0°–360°. Vermelho = 0°, Amarelo = 60°, Verde = 120°, Ciano = 180°, Azul = 240°, Magenta = 300°, de volta ao Vermelho = 360°.
  • Saturação S: 0%–100%. A 0% todas as cores tornam-se cinza; a 100% a cor é totalmente vívida.
  • Luminosidade L: 0%–100%. 0% é sempre preto; 100% é sempre branco; 50% é o matiz "puro".

Isso torna as operações de design naturais: "tornar esta cor 20% mais clara" é apenas L: 50% → 70%. CSS hsl() é amplamente usado em sistemas de design porque permite ajustes de cor ao nível do componente com aritmética simples.

HSL tem uma fraqueza perceptual: hsl(60, 100%, 50%) (amarelo) parece muito mais brilhante que hsl(240, 100%, 50%) (azul), embora ambos tenham o mesmo valor L de 50%. Para uniformidade perceptual, use Lab ou oklch.

HSV / HSB —— O Modelo do Photoshop

HSV (Matiz, Saturação, Valor) —também chamado HSB (Hue, Saturation, Brightness)— é estruturalmente similar ao HSL, mas substitui a Luminosidade pelo Valor:

  • Valor V: 0%–100%. A 0%, a cor é sempre preta, independente de H e S. A 100%, a cor está no brilho máximo (mas não necessariamente branco).

A diferença prática: em HSL, uma cor pura fica em L=50%; em HSV, em V=100%, S=100%. Aumentar L acima de 50% em HSL adiciona branco (clareamento); HSV não tem clareamento nativo—você baixa S para adicionar branco.

Adobe Photoshop, Illustrator e a maioria dos seletores de cor profissionais usam HSV/HSB porque seu modelo de "brilho máximo" parece natural ao escolher cores vívidas. Designers frequentemente preferem HSV para criação de paletas, enquanto desenvolvedores preferem HSL para manipulações CSS.

CMYK —— O Modelo de Impressão

CMYK (Ciano, Magenta, Amarelo, Chave/Preto) é um modelo de cor subtrativo. Ao contrário do RGB aditivo (adicionar luz cria branco), modelos subtrativos trabalham com tinta no papel—cada tinta absorbe (subtrai) certas comprimentos de onda, e a luz refletida é o que vemos.

  • Ciano absorve vermelho; reflete azul+verde
  • Magenta absorbe verde; reflete vermelho+azul
  • Amarelo absorbe azul; reflete vermelho+verde
  • Chave (Preto) melhora a profundidade das sombras e economiza tinta (CMY misturadas raramente produzem preto verdadeiro)

Cada canal é expresso como percentagem de 0 a 100%. CMYK é o padrão para impressão offset, embalagens, revistas e tudo que termina como tinta física no papel.

Um aviso crítico: RGB e CMYK não são totalmente intercambiáveis. Muitas cores RGB vibrantes (verdes neon, azuis elétricos) ficam fora da gama CMYK e serão impressas como aproximações mais apagadas. Sempre verifique em CMYK antes de enviar arquivos para a gráfica.

CIE L*a*b* —— Uniformidade Perceptual

Lab (ou CIELAB) é um espaço de cor independente de dispositivo projetado para que distâncias numéricas iguais correspondam a diferenças de cor percebidas iguais. Foi criado pela CIE em 1976 para resolver a não uniformidade perceptual de modelos anteriores.

  • L*: Luminosidade, 0 (preto) a 100 (branco)
  • a*: Verde (negativo) a Vermelho (positivo), aproximadamente −128 a +127
  • b*: Azul (negativo) a Amarelo (positivo), aproximadamente −128 a +127

Lab é o padrão ouro para ciência das cores, edição de imagens (modo Lab do Photoshop) e cálculos de diferença de cor (ΔE). ΔE < 1 é imperceptível para o olho humano; ΔE < 3 é aceitável para a maioria dos trabalhos de impressão.

Lab é a base do moderno CSS oklch(), que reembala Lab em coordenadas polares (Luminosidade, Croma, Matiz) para uso mais fácil.

RGBA e HSLA —— Adicionando Transparência

Tanto RGB quanto HSL suportam um canal alfa—um quarto valor de 0 (completamente transparente) a 1 (completamente opaco)—dando RGBA e HSLA.

rgba(255, 99, 71, 0.5)   /* tomate a 50% de opacidade */
hsla(9, 100%, 64%, 0.7)  /* mesma cor, 70% opaco */

CSS moderno também aceita a sintaxe com barra: rgb(255 99 71 / 50%). A composição alfa segue a operação "over" de Porter-Duff.

Fórmulas Matemáticas de Conversão

RGB ↔ HEX

// Conversão RGB para HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => Math.round(v).toString(16).padStart(2, '0'))
    .join('');
}

// HEX para RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

RGB ↔ HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // acromático
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

Espaços de Cor e Perfis

Um espaço de cor define qual subconjunto de todas as cores visíveis um dispositivo ou arquivo pode representar:

Espaço de cor Cobertura de gama Uso
sRGB ~35% do visível Web, monitores padrão, JPEG
Adobe RGB ~50% do visível Fotografia profissional, impressão
Display P3 ~45% do visível iPhone, Mac, telas modernas
ProPhoto RGB ~90% do visível Edição de fotos RAW
Rec. 2020 ~75% do visível Vídeo HDR, transmissão 4K

Designers web trabalham predominantemente em sRGB, que é o espaço de cor assumido de CSS, PNG e JPEG. Porém, Safari e Chrome agora suportam a função CSS color() com display-p3 para telas de gama ampla, e a função oklch() pode referenciar cores completamente fora do sRGB.

Perfis de cor (perfis ICC) são arquivos de dados que dizem aos softwares como mapear números de cor para luz real. Exportar uma imagem "com perfil incorporado" garante renderização consistente entre dispositivos.

Uso de Cores em CSS

CSS evoluiu de simples valores hexadecimais para um rico ecossistema de cores:

/* Uso moderno de cores em CSS */
:root {
  --primary: #3B82F6;
  --primary-hsl: hsl(217, 91%, 60%);
  /* oklch para gama ampla P3 */
  --accent: oklch(70% 0.2 250);
}

/* Auxiliar de verificação de contraste WCAG */
.text-accessible {
  color: #1a1a1a;       /* contraste 16,1:1 no branco — AAA */
  background: #ffffff;
}

Cores nomeadas: CSS define 140 cores nomeadas, de aliceblue a yellowgreen. São legíveis mas inflexíveis para design sistemático.

Funções modernas:

  • rgb(255 99 71) — sintaxe moderna separada por espaços
  • hsl(9deg 100% 64%) — legível e ajustável
  • oklch(70% 0.2 250) — uniformidade perceptual, gama ampla
  • color(display-p3 1 0.389 0.279) — gama ampla explícita

Propriedades personalizadas CSS (variáveis) são a pedra angular do theming moderno. Com variáveis baseadas em HSL, gerar uma escala completa de tons a partir de um único matiz é simples com aritmética.

Acessibilidade e Taxas de Contraste

As WCAG (Diretrizes de Acessibilidade para Conteúdo Web) definem requisitos de taxa de contraste para texto legível:

  • Nível AA: 4,5:1 para texto normal, 3:1 para texto grande (18pt ou 14pt negrito)
  • Nível AAA: 7:1 para texto normal, 4,5:1 para texto grande

A taxa de contraste é calculada a partir da luminância relativa:

Contraste = (L1 + 0.05) / (L2 + 0.05)

onde L1 é a luminância mais clara e L2 é a mais escura.

Combinações seguras comuns: preto (#000000) sobre branco (#ffffff) = 21:1 (AAA perfeito); cinza #767676 sobre branco = exatamente 4,5:1 (passa AA).

Ferramentas de Design e Gestão de Cores

Figma: Armazena cores como RGB internamente. O seletor de cores expõe HEX, RGB, HSL, HSB e notação CSS. Tokens de design (variáveis) podem ser publicados para código via API de Variáveis do Figma, exportando como propriedades personalizadas CSS ou JSON.

Sketch: Usa RGB com amostras nomeadas e bibliotecas de cores compartilhadas. Suporta dicas de exportação CMYK para entregáveis impressos. Plugins como Stark adicionam verificação de contraste WCAG.

Adobe Photoshop / Illustrator: As ferramentas Adobe suportam nativamente CMYK, Lab e fluxos de trabalho com perfis de cor. O seletor de cores do Photoshop usa HSB (HSV) por padrão.

Casos de Uso: Marca, Tokens e Consistência entre Mídias

Diretrizes de marca definem o conjunto canônico de cores para uma organização. Uma cor de marca bem especificada pode ser:

Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6

Esta especificação em múltiplos formatos garante que o azul pareça correto seja na serigrafia de uma camiseta, na impressão de um folheto ou na exibição em um site.

Tokens de design são variáveis nomeadas que mapeiam papéis semânticos a valores de cor. Ferramentas como Style Dictionary transformam tokens em arquivos específicos para cada plataforma: variáveis CSS para web, constantes Swift para iOS, recursos XML para Android.

Comparação: HSL vs HSV, sRGB vs Gama Ampla

HSL vs HSV: Ambos derivam do RGB; nenhum é perceptualmente uniforme. A cor pura do HSL está em L=50%; a do HSV está em V=100%, S=100%. HSV é melhor para uma UI de seletor de cores; HSL é melhor para manipulações CSS. Para verdadeira uniformidade perceptual, use oklch/Lab.

sRGB vs Gama Ampla: sRGB cobre cerca de 35% do espaço CIE 1931—suficiente para a maioria do trabalho web. Display P3 cobre ~45%, permitindo verdes e vermelhos mais vívidos em telas Apple/Samsung modernas. @media (color-gamut: p3) permite aprimoramento progressivo.

Melhores Práticas para Gestão de Cores

  1. Defina seu espaço de cor cedo: Use sRGB como padrão; adicione melhorias P3 progressivamente.
  2. Use HSL para variáveis CSS para gerar escalas de tons e temas com facilidade.
  3. Sempre especifique cores em múltiplos formatos para diretrizes de marca.
  4. Verifique o contraste WCAG para cada combinação texto-fundo antes de lançar.
  5. Incorpore perfis ICC em imagens exportadas para preservar a intenção.
  6. Prefira tokens semânticos a hex bruto em sistemas de design.
  7. Teste no modo escuro: Variáveis baseadas em HSL tornam o theming escuro muito mais fácil.
  8. Não assuma CMYK a partir de RGB: Sempre envolva um profissional de impressão para provar ativos de cor críticos.
  9. Use oklch para CSS moderno quando alvejando cores vívidas e de gama ampla com uniformidade perceptual.
  10. Documente as decisões de cor: Registre por que as cores foram escolhidas—justificativa de acessibilidade, história da marca, intenção emocional.

Perguntas Frequentes

P1: Qual é a diferença entre HEX e RGB? Eles representam a mesma informação de forma diferente. #FF8000 e rgb(255, 128, 0) são cores idênticas—HEX apenas usa notação hexadecimal. HEX é mais compacto; RGB é mais legível para números grandes.

P2: Por que minha cor RGB parece diferente quando impressa? Telas são aditivas (luz); impressão é subtrativa (tinta). Muitas cores vívidas de tela—especialmente azuis elétricos e verdes neon—não podem ser reproduzidas com tinta, então são "mapeadas para a gama" para o equivalente imprimível mais próximo, parecendo mais opacas.

P3: Quando devo usar HSL vs HSV? Use HSL ao escrever CSS ou construir tokens de design—integra-se naturalmente ao CSS moderno. Use HSV ao trabalhar em seletores de cor do Photoshop/Illustrator ou construindo seu próprio componente de seletor de cor.

P4: O que é oklch e por que é melhor que HSL? oklch é uma função de cor CSS que usa o espaço de cor perceptual Oklab. Diferente do HSL, mantém luminosidade percebida consistente entre matizes e também suporta cores Display P3 de gama ampla.

P5: Como verifico se duas cores têm contraste suficiente? Calcule a luminância relativa de cada cor, então aplique: (mais claro + 0.05) / (mais escuro + 0.05). O resultado deve ser ≥ 4,5 para WCAG AA. Nosso conversor de cores inclui um verificador de contraste integrado.

P6: A conversão RGB→CMYK nesta ferramenta é precisa? A conversão matemática é uma aproximação independente de dispositivo. Para trabalho de impressão profissional, CMYK preciso requer perfis de cor ICC específicos para sua impressora e papel. Use a ferramenta para estimativas; sempre comprove com seu fornecedor de impressão.

P7: Posso usar CSS oklch() hoje? Sim—oklch() tem suporte completo no Chrome 111+, Firefox 113+, Safari 16.4+ e Edge 111+. Para navegadores mais antigos, forneça um fallback: color: hsl(250, 80%, 55%); color: oklch(55% 0.18 250);.

Voltar ao blog Conversor de Cores →