Toolosaurus

Color Converter & Contrast

Convert HEX, RGB, HSL, and CMYK colors accurately and test WCAG accessibility contrast ratios.

UtilidadesAtualizado: Outubro 2026
Klicken zum Auswählen
HEX
#4F46E5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
CMYK
cmyk(66%, 69%, 0%, 10%)

WCAG 2.1 Kontrast-Prüfer

Barrierefreiheit nach offiziellen W3C-Richtlinien

Vordergrund:
Hintergrund:
Beispieltext für Kontrast
Dies ist Fließtext in normaler Schriftgröße (16px / Regular).
6.29:1
Kontrastverhältnis
Normaler Text (< 18pt)
AA BestandenAAA Nicht erfüllt
Großer Text (≥ 18pt / Fett)
AA BestandenAAA Bestanden
UI & Grafische Elemente
AA Bestanden
Step-by-step

How Color Converter & Contrast Works

Convert HEX, RGB, HSL, and CMYK colors accurately and test WCAG accessibility contrast ratios.

1

1. Inserir o código de cor ou utilizar o seletor visual

Digite ou cole o código da cor no campo de entrada, ou selecione a tonalidade através do seletor interativo. A ferramenta aceita códigos HEX (3, 6 ou 8 dígitos com canal alfa), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, CIE-Lab e CIE-LCh.

2

2. Verificação automática do espaço de cor

O nosso motor de conversão matemática reconhece de imediato a sintaxe inserida, valida os limites numéricos e atualiza todos os modelos cromáticos na memória do navegador sem atrasos.

3

3. Analisar transformações simultâneas e contraste

Confira os valores calculados em tempo real: notações modernas de CSS Color Module 4 (lch, lab, oklch, color(display-p3)), aproximações CMYK para impressão gráfica e rácios de contraste de acessibilidade WCAG.

4

4. Copiar os códigos para a área de transferência com um clique

Clique no botão de cópia junto ao formato pretendido (CSS, Tailwind CSS, Swift, XML para Android ou tokens para Figma) para colar diretamente no seu ambiente de desenvolvimento.

Key Benefits & Data Privacy

Conversão completa entre HEX, RGB, HSL, HSV, CMYK, LAB, LCH e coordenadas XYZ
Suporte avançado às especificações do CSS Color Module 4 (oklch, oklab, display-p3)
Manipulação de canais alfa com notação hexadecimal de 8 dígitos (#RRGGBBAA)
Transformações colorimétricas de precisão calibradas com iluminante padrão CIE D65
Verificação contínua de acessibilidade e contraste em conformidade com as normas WCAG 2.1
Função de cópia instantânea de código formatado para CSS, Tailwind, Swift e Android XML
Execução 100% no navegador garantindo resposta instantânea e total confidencialidade

Verificado e Desenvolvido pela Equipe Toolosaurus

Processamento em conformidade com o RGPD • Privacidade rígida no navegador • Hospedagem na Alemanha

Certificado RGPDData center ISO 27001
Guia prático e informações técnicas

Tudo o que você precisa saber sobre Color Converter & Contrast

Física da cor: Síntese aditiva em ecrãs e subtrativa em impressão gráfica

A formação de cores em ecrãs eletrónicos e em suportes impressos baseia-se em princípios físicos opostos. Os monitores de computador, televisores e smartphones utilizam a síntese aditiva a partir das três luzes primárias: vermelho, verde e azul (RGB). Quando esses três canais emitem luz com potência máxima (255, 255, 255), combinam-se para formar luz branca pura. Em contrapartida, a produção gráfica em papel adota a síntese subtrativa com tintas de ciano, magenta, amarelo e preto (CMYK). Os pigmentos absorvem comprimentos de onda específicos da luz que incide sobre eles, de maneira que a sobreposição de tintas escurece a superfície. Como a gama sRGB dos ecrãs é muito mais ampla do que o espetro de cores alcançado pelas tintas de impressão, converter valores sem critérios técnicos gera resultados desbotados. O nosso conversor aplica matrizes calibradas para assegurar consistência visual entre meios digitais e papel.

Modelos cilíndricos: Compreender HSL e HSV/HSB em sistemas de design

Embora os códigos RGB sejam essenciais para as placas gráficas, são pouco práticos para a percepção humana: é difícil deduzir que a tripla numérica (46, 204, 113) representa um verde esmeralda vibrante. Para tornar o trabalho criativo intuitivo, foram desenvolvidos modelos cilíndricos como HSL (Matiz, Saturação, Luminosidade) e HSV/HSB (Matiz, Saturação, Valor/Brilho). O matiz (Hue) é posicionado num círculo de 0° a 360°, percorrendo vermelho (0°), amarelo (60°), verde (120°), ciano (180°), azul (240°) e magenta (300°). A distinção fundamental reside no eixo de claridade: em HSL, 100% de luminosidade corresponde sempre ao branco puro, ficando a cor viva pura em 50%; já em HSV, 100% de valor mantém o pigmento na sua tonalidade mais intensa sem clareá-lo. O nosso sistema apresenta ambos os modelos para facilitar a composição de paletas harmónicas em Figma e CSS.

Espaços perceptuais uniformes: CIE-Lab, LCh e o novo padrão Oklch no CSS

Os modelos habituais como sRGB e HSL sofrem de uma limitação técnica: não possuem uniformidade perceptual. Aos olhos humanos, um amarelo puro (rgb(255,255,0)) parece muito mais claro do que um azul puro (rgb(0,0,255)), embora no modelo HSL ambos apresentem exatamente os mesmos 50% de luminosidade calculada. A Comissão Internacional de Iluminação solucionou este problema com os espaços CIE L*a*b* e CIE L*C*h, que reproduzem a sensibilidade dos fotorreceptores da retina humana. A moderna especificação CSS Color Module Level 4 consagra esta evolução através de oklab() e oklch(), permitindo criar gradientes fluidos sem zonas cinzentas indesejadas. O nosso conversor fornece todos os parâmetros necessários para aplicar estes recursos de última geração no seu código.

Engenharia de acessibilidade: Contraste e luminância segundo as diretrizes WCAG 2.1

Construir aplicações e websites acessíveis é uma exigência técnica e social incontornável. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1 / 2.2) definem critérios objetivos de contraste entre o texto em primeiro plano e o respetivo fundo, de modo a assegurar facilidade de leitura para pessoas com baixa visão ou sob condições de iluminação desfavoráveis. O nível de conformidade AA exige um rácio de contraste de pelo menos 4.5:1 para texto normal e de 3.0:1 para títulos grandes (a partir de 18pt ou 14pt em negrito). O nível avançado AAA estabelece a meta de 7.0:1. O nosso conversor calcula a luminância relativa conforme as normas ISO e avalia instantaneamente a conformidade em fundos brancos e pretos, garantindo escolhas de cores belas e perfeitamente legíveis.

FAQ

Frequently Asked Questions

Topic Cluster

Related Tools

View all 50 tools