Go Toolstack

Conversor de Formatos de Cor

Converta códigos de cores entre HEX, RGB, HSL, HSV e CMYK com precisão matemática.

Conversor de Formatos de Cor

Converta códigos de cores entre HEX, RGB, HSL, HSV e CMYK com precisão matemática.

Como funciona

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Descubra mais utilitários do lado do cliente nesta categoria

Central de Imagens & Design • Fluxos de trabalho e guia de comparação

Explore todas as ferramentas de imagens & design, limites técnicos e guia de seleção.

Explorar central →
Gerador de Códigos QR Personalizado

Crie QR Codes de alta qualidade para links, senhas de Wi-Fi, cartões de contato e textos.
Compressor de Imagens

Comprima fotos e ilustrações em JPEG, PNG e WebP para otimizar velocidade de sites.
Redimensionador de Imagens

Altere as dimensões das suas fotos em pixels com proporção travada.

Guias do blog relacionados

Guias técnicos, resolução de problemas e tutoriais de melhores práticas

Central de Conhecimento e Conceitos

Conversor Universal de Cores: HEX, RGB, HSL, HSV, CMYK e CSS Moderno

A interoperabilidade entre folhas de estilo CSS, softwares de edição gráfica (Photoshop, Figma, Illustrator) e processos gráficos industriais exige a conversão matemática contínua entre espaços cromáticos heterogêneos. O utilitário traduz coordenadas de cor instantaneamente entre notações populares da web (HEX, RGB, HSL, HSV) e formatos modernos da especificação CSS Color Module Level 4 (como OKLab, OKLCH, LCH e Lab perceptualmente uniformes).

Um engenheiro front-end precisa modernizar a paleta de cores de uma folha de estilos CSS e recebe o valor hexadecimal #6366F1 (Índigo Claro). Ao colar o código na ferramenta, o conversor decompõe a cor em RGB(99, 102, 241), HSL(239°, 84%, 67%), HSV(239°, 59%, 95%) e o modelo de impressão CMYK(59%, 58%, 0%, 5%). A ferramenta calcula simultaneamente a representação no espaço perceptual OKLCH [ oklch(0.62 0.19 275°) ], permitindo manipular transições de luminosidade sem distorções de matiz comuns em modelos legados, com cópia direta para o código-fonte.

As transformações trigonométricas de matrizes cromáticas são processadas 100% no seu navegador. Nenhuma diretriz visual de sua marca ou layout proprietário é exposta na internet.

Arquitetura Central e Fórmula Matemática

Conversão RGB ➔ HSL: L = ( Máx + Mín ) / 2 | S = Δ / ( 1 - |2L - 1| ) | H = Ângulo trigonométrico de setor

Algoritmos não lineares de conversão entre espaços cúbicos (RGB), cilíndricos (HSL/HSV) e espaços de cor perceptualmente uniformes baseados em luminância.

Melhores Práticas e Diretrizes Essenciais

  • Adote o espaço OKLCH para criar sistemas modernos de design em CSS: O OKLCH é perceptualmente uniforme, o que significa que 50% de luminosidade parecerá visualmente idêntico em tons azuis, amarelos ou verdes.
  • Utilize notação HEX com 8 caracteres para incluir canal alfa no CSS: Adicionar dois dígitos no final (como #6366F180) define transparência de 50% sem necessidade de escrever rgba().
  • Confira o gamut de cores (espaço P3 vs sRGB) em monitores avançados: Telas modernas de smartphones e notebooks suportam a gama estendida Display P3, exibindo cores muito mais vívidas.
  • Consulte os valores CMYK antes de fechar arquivos para gráfica física: A conversão digital do RGB para CMYK serve como referência teórica; utilize perfis ICC de cores para provas de impressão fiéis.

Perguntas Frequentes (FAQ)

Por que o modelo HSL é muito mais intuitivo para programadores do que o RGB?
No HSL você ajusta o matiz (Hue de 0 a 360°), a intensidade da cor (Saturation) e a claridade (Lightness), facilitando clarear ou escurecer elementos com simples adição percentual.
O que significa 'espaço de cor perceptualmente uniforme' (como OKLab/OKLCH)?
Significa que uma alteração numérica de 10% na luminosidade produz uma diferença visual exatamente igual aos olhos humanos em qualquer tonalidade, corrigindo a distorção do HSL tradicional.
A ferramenta lida com canais de transparência alfa em todos os formatos?
Sim. Você pode ajustar a barra de opacidade (de 0 a 1 ou 0% a 100%) e obter saídas atualizadas em rgba(), hsla(), hex de 8 dígitos e oklch(L C H / alpha).
Como converter uma cor para o formato exigido pelo pré-processador Sass ou Tailwind?
A ferramenta fornece botões de cópia rápida formatados tanto em código CSS nativo quanto em valores literais numéricos prontos para variáveis de temas.