Conversor de Cores

Converta cores entre os formatos RGB, HEX, HSL, HSV e CMYK

Color Converter
H: 0°
S: 100%
L: 50%
H: 0°
S: 100%
V: 100%
C: 0%
M: 100%
Y: 100%
K: 0%

Guia Completo de Conversão de Cores

Guia abrangente sobre modelos de cores, formatos, conversões e aplicações profissionais de design

Entendendo os Modelos de Cor

Modelos de Cor Digital

  • •HEX: hexadecimal de 6 dígitos (#RRGGBB), 16,7 milhões de cores
  • •RGB: Vermelho/Verde/Azul (0–255 cada), modelo aditivo para telas
  • •RGBA: RGB + transparência Alfa (0–1)
  • •HSL: Matiz (0–360°)/Saturação/Luminosidade (0–100%)
  • •HSV/HSB: Matiz/Saturação/Valor (alternativa ao HSL)

Modelos de Cor para Impressão e Indústria

  • •CMYK: Ciano/Magenta/Amarelo/Preto (0–100%), subtrativo para impressão
  • •Pantone (PMS): cores spot padronizadas para consistência de marca
  • •LAB (CIELAB): independente de dispositivo, perceptualmente uniforme
  • •LCH: Luminosidade/Croma/Matiz (perceptual)
  • •XYZ: tristímulo CIE 1931, padrão científico

Referência de Formatos de Cor

Conversão HEX e RGB

  • •HEX para RGB: analisar pares (#FF6B35 → R=255, G=107, B=53)
  • •RGB para HEX: converter cada canal para hex de 2 dígitos
  • •Abreviação CSS: #RGB (3 dígitos) = #RRGGBB
  • •Alfa em HEX: 8 dígitos #RRGGBBAA
  • •Exemplo: Branco = #FFFFFF = rgb(255,255,255)

Relação HSL e RGB

  • •Matiz: 0°=vermelho, 60°=amarelo, 120°=verde, 180°=ciano, 240°=azul, 300°=magenta
  • •Saturação 0% = cinza, 100% = cor plena
  • •Luminosidade 0% = preto, 50% = normal, 100% = branco
  • •Vermelho: HSL(0°,100%,50%) = RGB(255,0,0)
  • •Azul: HSL(240°,100%,50%) = RGB(0,0,255)

Relação CMYK e RGB

  • •RGB→CMYK: K=1−máx(R,G,B); C=(1−R−K)/(1−K); M=(1−G−K)/(1−K); Y=(1−B−K)/(1−K)
  • •Vermelho puro RGB(255,0,0) = CMYK(0%,100%,100%,0%)
  • •Preto puro RGB(0,0,0) = CMYK(0%,0%,0%,100%)
  • •Branco RGB(255,255,255) = CMYK(0%,0%,0%,0%)

Aplicações Profissionais

Design Web e de UI

  • •Sintaxe de cor CSS (hex, rgb(), hsl(), oklch())
  • •Tokens de cor para modo escuro
  • •Razões de contraste WCAG (4.5:1 para texto normal)
  • •Variáveis de cor de marca em sistemas de design
  • •Valores hex para Tailwind/CSS-in-JS
  • •Criação de gradientes com rotação de matiz HSL

Design Gráfico e Identidade de Marca

  • •Correspondência de cor Pantone para identidade de marca
  • •Conversão CMYK para impressão offset
  • •Preto rico vs. preto padrão para áreas grandes
  • •Perfis de cor (sRGB vs CMYK) para entrega de arquivos
  • •Configurações de sobreimpressão
  • •Separações de cor spot

Fotografia e Vídeo

  • •Gradação de cor nos espaços Rec.709 / Rec.2020
  • •Cor LAB para edição perceptual
  • •Criação de LUT (Look-Up Table)
  • •Referência de tom de pele (aproximadamente matiz 180–220 em HSL)
  • •Calibração de cor com X-Rite ColorChecker
  • •Conteúdo HDR (gama mais ampla)

Visualização de Dados

  • •Paletas sequenciais (do claro ao escuro) para dados ordenados
  • •Paletas divergentes para dois extremos
  • •Paletas qualitativas para categorias
  • •Paletas seguras para daltônicos (evitar apenas vermelho-verde)
  • •Uniformidade perceptual no espaço LAB
  • •Acessibilidade em gráficos (WCAG 1.4.1)

Boas Práticas de Conversão de Cor

Precisão e Espaços de Cor

  • •HEX/RGB são sRGB por padrão — especifique o espaço de cor para gama ampla
  • •A conversão LAB requer ponto branco (padrão D65)
  • •Os valores CMYK dependem do perfil de cor ICC
  • •A correspondência de cores entre telas varia conforme a calibração do monitor
  • •Sempre comprove as cores de impressão antes da produção final

Considerações de Acessibilidade

  • •Razão de contraste mínima WCAG AA: 4.5:1 (texto normal), 3:1 (texto grande)
  • •WCAG AAA: 7:1 (normal), 4.5:1 (grande)
  • •Cerca de 8% dos homens têm daltonismo vermelho-verde — teste com Coblis ou similar
  • •Não dependa apenas da cor para transmitir informações
  • •Teste com conversão em escala de cinza

Exemplos de Cor por Categoria

Cores Web-Safe e Comuns

  • •Branco: #FFFFFF = rgb(255,255,255) = hsl(0°,0%,100%)
  • •Preto: #000000 = rgb(0,0,0)
  • •Vermelho: #FF0000 = rgb(255,0,0) = hsl(0°,100%,50%)
  • •Azul-marinho: #000080 = rgb(0,0,128) = hsl(240°,100%,25%)
  • •Laranja: #FFA500 = rgb(255,165,0)
  • •Cinza: #808080 = rgb(128,128,128)
  • •Verde: #008000 = rgb(0,128,0)

Cores de Marca

  • •Vermelho Coca-Cola: #F40009 (CMYK 0/100/100/4)
  • •Azul Facebook: #1877F2
  • •Azul Google: #4285F4
  • •Início do gradiente Instagram: #F58529
  • •Laranja Amazon: #FF9900
  • •Verde Spotify: #1DB954
  • •Preto Apple: #1D1D1F

Exemplos de Sistemas de Design

  • •Tailwind blue-500: #3B82F6 = hsl(217°,91%,60%)
  • •Tailwind red-500: #EF4444
  • •Material primary blue: #1976D2
  • •Bootstrap primary: #0D6EFD
  • •shadcn/ui foreground: #09090B
  • •Texto silenciado: #71717A
  • •Destrutivo: #DC2626

Perguntas Frequentes

Qual é a diferença entre RGB e CMYK?▾
RGB (Vermelho, Verde, Azul) é um modelo aditivo para telas que mistura luz. RGB completo (255,255,255) = branco. CMYK (Ciano, Magenta, Amarelo, Preto) é um modelo subtrativo para impressão que mistura tintas. CMYK completo (100,100,100,100) = quase preto. Cores vibrantes na tela podem parecer apagadas quando impressas, pois a tinta não consegue reproduzir toda a gama RGB.
Por que a cor da minha tela parece diferente quando impressa?▾
As telas emitem luz usando o modelo RGB, que tem uma gama mais ampla do que o modelo CMYK usado pelas impressoras. Cores brilhantes e saturadas — azuis elétricos, verdes neon, laranjas vívidos — frequentemente não podem ser reproduzidas com tinta no papel. Sempre converta para CMYK e faça uma prova de impressão antes de finalizar artes de marca ou embalagem.
O que é a notação de cor HEX?▾
Um código de cor HEX é um número hexadecimal de 6 dígitos precedido por #, como #FF5733. Os dois primeiros dígitos são o canal vermelho (00–FF), os dois do meio são o verde e os dois últimos são o azul. Cada par representa 0–255 em base 16. Códigos curtos como #F00 são abreviações de #FF0000. Um HEX de 8 dígitos (#RRGGBBAA) inclui o canal alfa (opacidade).
Como verifico o contraste de cor para acessibilidade?▾
Use a fórmula de razão de contraste WCAG: (L1 + 0,05) / (L2 + 0,05), onde L1 e L2 são as luminâncias relativas das duas cores. WCAG AA requer 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt negrito). WCAG AAA requer 7:1 para texto normal. Ferramentas como WebAIM Contrast Checker calculam isso instantaneamente.
Qual é a diferença entre HSL e HSV?▾
Ambos usam Matiz e Saturação, mas diferem no terceiro componente. HSL (Luminosidade) define 50% como a cor 'pura': 0% é preto, 100% é branco, 50% é totalmente saturado. HSV (Valor/Brilho) define 100% como a cor pura: 0% é sempre preto independentemente do matiz. HSL é mais comum em CSS e design web; HSV é mais comum em editores de imagem como o Photoshop.
Qual formato de cor devo usar para design web?▾
Para design web, HEX é o formato mais usado e legível para cores estáticas. Use hsl() em CSS quando precisar ajustar luminosidade ou matiz programaticamente (ótimo para tokens de design e temas). Use rgba() quando precisar de transparência. Para navegadores modernos, oklch() oferece manipulação de cor perceptualmente uniforme e é cada vez mais recomendado para sistemas de design.