Conversor de cores HEX, RGB e HSL
Uma cor em todas as notações, com o contraste.
HEX com ou sem #, de 3, 4, 6 ou 8 dígitos; rgb() ou rgba(); hsl() ou hsla(); ou um nome do CSS, como teal.
Preencha os campos e a resposta aparece aqui.
Como a conta foi feita
Preencha os campos e a resposta aparece aqui.
Guia: A mesma cor, cinco notações2 min de leitura
A mesma cor, cinco notações
HEX, RGB e HSL são três jeitos de escrever os mesmos três números. HEX é o do CSS e dos programas de design; RGB diz quanto de vermelho, verde e azul, de 0 a 255; HSL descreve a cor como matiz, saturação e luminosidade, o que facilita criar variações mais claras ou mais escuras de uma cor. Cole em qualquer uma e a página mostra as outras, mais HSB, o modelo dos seletores do Figma e do Photoshop, e CMYK.
Contraste para ler
Uma cor bonita pode ser ilegível como fundo de texto. A página calcula o contraste WCAG com branco e com preto: 4,5:1 é o mínimo para texto comum, 3:1 para texto grande, 7:1 é o nível AAA. E diz qual dos dois lê melhor sobre a cor, com uma amostra ao lado. O cinza 777777 no branco dá 4,48:1 e reprova por pouco; o 767676, um tom mais escuro, passa.
CMYK e impressão
O CMYK mostrado é a conversão matemática direta, a mesma que os programas de design exibem. A cor que sai da impressora depende do papel e do perfil de cor da gráfica, então para um trabalho impresso peça os valores a quem vai imprimir. Nada do que você digita sai desta aba.
Perguntas frequentes
Como converter HEX em RGB?
Cada par de dígitos hexadecimais é um canal de 00 a FF, que vai de 0 a 255: o hexadecimal 336699 é 33 de vermelho, 66 de verde e 99 de azul, que em decimal são 51, 102 e 153. Digite ou cole a cor em qualquer notação e as outras aparecem.
O que significam as notas de contraste?
São as do WCAG 2. Texto comum precisa de contraste de pelo menos 4,5:1 com o fundo (AA), texto grande ou em negrito 3:1, e 7:1 chega ao AAA. A página compara a cor com branco e com preto e diz qual dos dois se lê melhor sobre ela.
Qual a diferença entre HSL e HSB?
Os dois descrevem matiz e saturação; discordam sobre o brilho. No HSL, 100% de luminosidade é sempre branco. No HSB (ou HSV), 100% de brilho é a versão mais pura da cor. Os seletores do Photoshop e do Figma usam HSB; o CSS usa HSL.
O CMYK serve para impressão?
É a conversão matemática direta, o mesmo número que a maioria dos programas de design mostra. O que a gráfica imprime de verdade depende do papel e do perfil de cor dela, então para impressão peça os valores à gráfica.
Quais formatos posso colar?
HEX com ou sem #, com 3, 4, 6 ou 8 dígitos; as funções rgb e rgba, com vírgulas ou com a sintaxe nova de espaços; hsl e hsla; e nomes de cor do CSS, como teal ou tomato.