Conversor de cores
Converta cores em tempo real entre os formatos HEX, RGB, HSL, CMYK e CIE LAB. Inclui verificador de contraste WCAG 2.1, aviso de gama de impressão e simulador de daltonismo.
Ferramentas Online#3B82F6
Detecção de fósforos RGB aditivos fora da gama de reprodução com tintas subtrativas de 4 cores.
Cálculo em tempo real de luminância relativa e verificação de legibilidade contra branco puro e preto puro.
Sistemas de Design & Tipografia Digital
Clareza visual e alto contraste para interfaces de software, bibliotecas de componentes e experiências inclusivas.
Sistemas de Design & Tipografia Digital
Clareza visual e alto contraste para interfaces de software, bibliotecas de componentes e experiências inclusivas.
Matrizes de projeção científica (Brettel / Machado) para simulação de deficiências cromáticas hereditárias.
Tricromacia (Visão Normal)
Percepção visual humana padrão em todo o espectro visível
Protanopia (Insensibilidade ao Vermelho)
Deficiência nos cones L; sensibilidade reduzida a comprimentos de onda vermelhos (~1% dos homens)
Deuteranopia (Insensibilidade ao Verde)
Deficiência nos cones M; confusão vermelho-verde, forma mais comum de daltonismo (~5% dos homens)
Tritanopia (Insensibilidade ao Azul)
Deficiência nos cones S; confusão azul-amarelo, condição rara (~0,01% da população)
Acromatopsia (Monocromia Total)
Ausência total da função dos cones; visão restrita à escala de cinzas (~0,003% da população)
Sincronização matemática bidirecional imediata entre 7 formatos de cor padronizados.
Gama harmônica para UI derivada da variação de luminosidade com preservação de matiz e saturação.
Tokens de design e declarações de código prontas para uso direto no seu software.
// Utilitários de cores arbitrárias do Tailwind CSS <div className="bg-[#3b82f6] text-white border-[#3b82f6]" />
Como Usar o Conversor de Cores e Estúdio de Acessibilidade (Passo a Passo)
Domine a conversão de espaços de cor, auditoria de contraste WCAG 2.1, gama de impressão e exportação de tokens.
Introduza Qualquer Cor ou Use a Colagem Universal
Escreva, cole ou selecione qualquer formato na barra de pesquisa: HEX (#3b82f6), RGB, HSL, HSV, CMYK, CIE LAB ou nomes CSS padrão (ex. 'coral', 'indigo'). O motor deteta o formato de imediato e sincroniza todos os painéis em tempo real.
Ajuste os Canais com Controlos Deslizantes
Modifique em tempo real as componentes cromáticas com barras deslizantes para Vermelho, Verde, Azul, Alfa, Matiz (Hue), Saturação, Luminosidade ou tintas CMYK. Explore a paleta monocromática de 5 níveis para obter gradientes harmónicos.
Audite a Acessibilidade e o Contraste WCAG 2.1
O verificador de acessibilidade integrado avalia a razão de contraste em fundos branco e preto. Confirme se os seus textos cumprem os níveis AA (mínimo de 4.5:1 para texto normal, 3:1 para texto grande) e AAA (7:1) das diretrizes WCAG.
Inspecione a Gama de Impressão (Ponte CMYK)
Verifique se tons digitais muito vivos podem ser reproduzidos na impressão gráfica física. Perante um alerta de cor fora de gama, clique em 'Limitar à Gama de Impressão' para obter uma aproximação segura para produção gráfica.
Simule Deficiências Visuais e Daltonismo
Avalie como a cor é percecionada por pessoas com Protanopia (insensibilidade ao vermelho), Deuteranopia (ao verde), Tritanopia (ao azul) ou Acromatopsia (visão monocromática), assegurando uma interface inclusiva para todos.
Exporte Tokens de Design e Código de Programação
Copie as especificações técnicas com um clique ou utilize trechos de código prontos a usar para Tailwind CSS, Propriedades Personalizadas CSS (:root), SwiftUI (iOS) ou Jetpack Compose (Android).
Perguntas Frequentes (FAQ)
Respostas técnicas sobre teoria da cor, espaços cromáticos digitais, acessibilidade web e impressão gráfica.
Q:Qual é a diferença entre os modelos de cor RGB, HSL e CMYK?
O RGB é um modelo aditivo para ecrãs digitais que combina feixes de luz Vermelha, Verde e Azul entre 0 e 255. O HSL descreve as cores intuitivamente por Matiz (Hue 0–360°), Saturação (0–100%) e Luminosidade (0–100%), facilitando o desenho de interfaces. O CMYK é um modelo subtrativo para impressão gráfica (Ciano, Magenta, Amarelo e Preto); como o papel reflete a luz ambiente em vez de a emitir, a gama CMYK é mais estreita do que a do RGB.
Q:Quais são os requisitos de contraste WCAG 2.1 para os níveis AA e AAA?
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1) exigem razões de contraste mínimas entre texto e fundo. O nível AA exige pelo menos 4.5:1 para texto padrão e 3:1 para texto de grandes dimensões (18pt ou 14pt a negrito) e componentes de interface. O nível AAA exige um rácio reforçado de 7:1 para texto padrão e 4.5:1 para texto grande.
Q:Por que razão as cores vivas do ecrã perdem brilho ao serem impressas?
Os ecrãs digitais emitem luz num espectro abrangente (sRGB ou DCI-P3), alcançando tons néon e azuis intensos. O papel físico absorve a luz e as tintas de impressão em quadricromia (CMYK) não conseguem reproduzir fisicamente essas saturações extremas. A nossa ferramenta alerta para cores fora de gama e calcula a equivalência de impressão mais fiel.
Q:O que é o espaço de cor CIE LAB e por que razão é relevante?
O CIE L*a*b* é um espaço de cor uniforme na perceção humana e independente de qualquer dispositivo, definido pela Comissão Internacional de Iluminação. 'L' representa a luminosidade percecionada (0–100), 'a' o eixo verde-vermelho e 'b' o eixo azul-amarelo. Ao contrário do RGB ou HEX, uma distância numérica no espaço LAB reflete exatamente a diferença visual detetada pelo olho humano.
Q:Como funciona o simulador de daltonismo e visão de cores?
O simulador aplica matrizes matemáticas de transformação ótica baseadas na sensibilidade dos cones retinianos: Protanopia (ausência de cones L para o vermelho), Deuteranopia (ausência de cones M para o verde), Tritanopia (ausência de cones S para o azul) e Acromatopsia (ausência total de visão a cores). Permite antecipar a experiência visual e evitar combinações inacessíveis.
Q:O que é a luminância relativa e como se calcula a razão de contraste?
A luminância relativa (Y) mede o brilho percecionado de uma cor normalizado entre 0 (preto) e 1 (branco), calculada pela fórmula sRGB: Y = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin. A razão de contraste WCAG entre duas cores é calculada por (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara e L2 a da cor mais escura.
Q:As minhas cores, paletas ou definições são enviadas para algum servidor?
Não. 100% das conversões cromáticas, cálculos matemáticos, avaliações WCAG e gerações de código são processados exclusivamente no seu navegador. Nenhuma informação de cor sai do seu dispositivo ou é gravada em servidores remotos.
O que é Conversor de cores?
Como Otimizar o Fluxo de Trabalho Mobile
Especificações Técnicas
| Componente | Funcionalidade Principal | Vantagem de Integração |
|---|---|---|
| Snippets para Programadores | Gera código para CSS Custom Properties, Tailwind, SwiftUI e Jetpack Compose. | Reduz o erro humano na transferência de valores de cor do design para a engenharia. |
| Espaço de Cor RGBA / HSLA | Suporta o canal Alpha de 8 bits para transparências. | Essencial para criar sobreposições de UI (overlays) e efeitos visuais em aplicações web. |
| Inspetor de Gama de Impressão | Verifica a compatibilidade das cores brilhantes do ecrã com tintas de impressão. | Evita surpresas desagradáveis na impressão de materiais de marketing associados à app. |