Cores HTML: conversor e tabela de códigos de cores

Tabela de cores HTML

Clique em uma linha para abrir a cor no conversor acima.

Nomes de cores no CSS

Os 148 nomes de cores que o CSS entende. Clique em uma linha para abrir a cor no conversor.

Códigos de cores HTML, tabela de cores e conversor de cores

Converta qualquer cor entre HEX, RGB, HSL e HSV (com transparência), encontre o código HTML de uma cor pelo nome, verifique a legibilidade do texto sobre ela e consulte uma tabela pronta de códigos de cores HTML. Tudo é calculado na hora no seu navegador, nada é enviado a um servidor.

Como usar o conversor de cores

1. Digite ou cole uma cor no campo: HEX (#2563EB ou 2563EB), rgb(37, 99, 235), hsl(221, 83%, 53%), hsv(221, 84%, 92%) ou um nome de cor do CSS, como rebeccapurple. Valores com transparência, como #2563EB80 ou rgba(37, 99, 235, 0.5), também funcionam.
2. Ou escolha uma cor com o seletor ao lado do campo, ou clique em qualquer linha das tabelas de cores abaixo.
3. Copie o formato de que precisa com o botão de copiar ao lado dele: HEX, HEX com alfa, RGB, RGBA, HSL, HSLA, HSV ou o nome da cor no CSS quando houver correspondência exata.

Se a cor está em uma imagem, em uma foto ou na sua tela, use o seletor de cores online para pegá-la e depois cole o código aqui para obtê-la em todos os formatos.

HEX, RGB, HSL e HSV: qual é a diferença?

• HEX (#RRGGBB) é a forma mais curta e comum de escrever uma cor em HTML e CSS. Cada par de dígitos é a quantidade de vermelho, verde e azul, de 00 a FF. Um par extra adiciona transparência (#RRGGBBAA).
• RGB e RGBA escrevem as mesmas quantidades de vermelho, verde e azul como números de 0 a 255, com um alfa (opacidade) opcional de 0 a 1.
• HSL e HSLA descrevem a cor como matiz (0 a 360 graus no círculo cromático), saturação e luminosidade. São os mais fáceis de ajustar à mão: mude a luminosidade para um tom mais claro ou mais escuro e mantenha o matiz para ficar na mesma família de cores.
• HSV (também chamado de HSB) usa matiz, saturação e valor (brilho). É o que a maioria dos editores gráficos e seletores de cor mostra.

Contraste do texto (WCAG)

O conversor mostra a taxa de contraste da cor selecionada com texto branco e com texto preto. As diretrizes de acessibilidade da web (WCAG) pedem pelo menos 4,5:1 para texto normal e 3:1 para texto grande (nível AA), e 7:1 e 4,5:1 para o nível AAA, mais rigoroso. Use isso para escolher uma cor de texto legível para um botão ou um fundo.

Tons e cor complementar

Abaixo do conversor aparecem três tons mais claros e três mais escuros do mesmo matiz, e a cor complementar, do lado oposto do círculo cromático. Clique em qualquer um para continuar trabalhando com essa cor.

Tabela de cores HTML

Aqui está uma tabela extensa de cores HTML que serve como uma cola prática para desenvolvedores web e designers. Você encontra uma lista de tons populares e raros com seus nomes em russo e em inglês (por exemplo, "Snow" ou "Cornflower") e os códigos HEX correspondentes, necessários para o layout web e a estilização em CSS.

O conteúdo está organizado por grupos de cores, para você escolher rápido o tom ideal, do clássico preto e branco a variações como "Pale Goldenrod" ou "Sea Green". Use o campo de busca para encontrar uma cor pelo nome em russo ou em inglês ou pelo código HEX.

Nomes de cores no CSS

Além dos códigos HEX, o CSS entende 148 nomes de cores, como tomato, navy ou rebeccapurple. Você pode usá-los direto na folha de estilo no lugar de um código, e a segunda tabela lista todos eles com seus valores HEX. Os nomes são mais fáceis de ler, enquanto HEX, RGB e HSL permitem qualquer cor e transparência.