Converta cores entre HEX, RGB, HSL e CMYK, e analise a taxa de contraste de acessibilidade WCAG 2.1.
Verificação em conformidade com as diretrizes internacionais WCAG 2.1.
Converta cores entre HEX, RGB, HSL e CMYK, e analise a taxa de contraste de acessibilidade WCAG 2.1. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.
Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.
Esta ferramenta converte cores entre HEX, RGB, HSL e CMYK em tempo real. Escolha uma cor no seletor ou digite em qualquer campo, e os outros três são atualizados na hora, cada um com seu botão de copiar. Por exemplo, o âmbar #F59E0B vira rgb(245, 158, 11), hsl(38, 92%, 50%) e cmyk(0%, 36%, 96%, 4%). O campo HEX também aceita a forma abreviada de três dígitos, como #F90, que é expandida para #FF9900.
Cada formato tem sua função. HEX é o padrão em código web e programas de design; RGB corresponde à luz vermelha, verde e azul da tela; HSL descreve matiz, saturação e luminosidade, então para criar uma versão mais clara ou mais escura da mesma cor basta mudar o L, o que é muito útil em CSS; CMYK representa as quatro tintas de impressão. Ao digitar RGB, HSL ou CMYK, use números inteiros separados por vírgula, como rgb(255, 153, 0), hsl(36, 100%, 50%) ou cmyk(0%, 40%, 100%, 0%). Transparência (alfa) não é suportada.
Observe que o CMYK aqui é calculado a partir do RGB com uma fórmula simples, sem perfil de cor ICC. A cor impressa de verdade depende do papel, das tintas e da máquina, então antes de mandar imprimir confie nas amostras ou no perfil da gráfica. Além disso, o HSL é arredondado para números inteiros, e ao voltar de HSL para HEX um canal pode variar em um passo; é arredondamento normal, não erro.
Na aba do verificador de contraste você escolhe a cor do texto e a do fundo. A ferramenta calcula a razão de contraste pela WCAG 2.1 e mostra se ela passa para texto normal (AA 4.5:1, AAA 7:1), texto grande (AA 3:1, AAA 4.5:1) e componentes de interface (3:1), com pré-visualização ao vivo. Por exemplo, o cinza #767676 sobre branco dá 4.54:1 e passa no AA por pouco, enquanto #777777 fica em 4.47:1 e reprova. Para uma análise mais completa, com sugestões de cores, use o Analisador de contraste de cores deste site.
Cada par dos seis dígitos hexadecimais é um canal em base 16. Em #F59E0B, F5 = 245 (vermelho), 9E = 158 (verde) e 0B = 11 (azul), ou seja, rgb(245, 158, 11). Cole o código HEX na ferramenta e RGB, HSL e CMYK são calculados automaticamente.
A tela emite luz RGB e a impressão usa tintas CMYK que absorvem luz; cada uma cobre uma gama de cores diferente, e azuis, verdes e laranjas muito vivos muitas vezes não podem ser impressos exatamente. O CMYK desta ferramenta é uma conversão matemática que ignora papel e tinta, então peça uma prova com as configurações da gráfica.
A WCAG define texto grande como pelo menos 18 pt (cerca de 24 px) em peso normal, ou pelo menos 14 pt (cerca de 18,66 px) em negrito. Texto grande precisa de 3:1 para AA e texto normal de 4.5:1. Componentes de interface, como bordas de botões, contornos de campos e ícones, precisam de pelo menos 3:1 em relação às cores vizinhas.
Por enquanto não. A ferramenta interpreta rgb(r, g, b), hsl(h, s%, l%) e cmyk(c%, m%, y%, k%) sem alfa, e HEX com 3 ou 6 dígitos. Para verificar uma cor semitransparente, calcule antes a cor sólida que ela gera sobre o fundo e teste essa.
Ver esta categoria: Design e cores
Crie caixas com sombras realistas e efeitos de vidro fosco com cópia rápida de código CSS.
Avalie taxas de contraste entre texto e fundo com níveis AA/AAA e simule tipos de daltonismo.
Gere partículas, corpos elásticos, colisões e campos gravitacionais interativos em tempo real com Canvas.
Adicione pontos de ancoragem, arraste as alças de Bézier em uma tela de 500×500 e gere na hora o atributo d do caminho SVG e uma regra CSS clip-path: path().
