Conversor de cores: HEX, RGB e HSL
Digite uma cor em qualquer formato e veja os outros, incluindo o RGBA() do Power Apps. Confira também se o texto branco ou preto fica legível sobre ela.
Cor de entrada
Resultado
Para que serve
Cada ferramenta pede a cor de um jeito: o CSS aceita #336699, o Power Apps pede RGBA(51, 102, 153, 1), editores de design mostram HSL. A ferramenta converte entre eles e calcula o contraste, para você escolher cores que continuam legíveis.
Formatos aceitos
| Formato | Exemplos |
|---|---|
| HEX | #336699, #369 (abreviado), #33669980 (com transparência), com ou sem # |
| RGB | rgb(51, 102, 153), rgb(51 102 153 / 50%), rgb(20%, 40%, 60%) |
| HSL | hsl(210, 50%, 40%), hsl(210deg 50% 40% / 0.5) |
| Nome básico | red, navy, orange e os demais nomes do CSS básico |
Como funciona o contraste
O contraste segue a fórmula da WCAG 2: compara a luminância relativa da cor com a do branco e a do preto. O resultado vai de 1:1 (iguais) a 21:1 (preto sobre branco). Os níveis usados na tela são: AA a partir de 4,5:1 para texto comum, AA para texto grande a partir de 3:1 e AAA a partir de 7:1. O valor é truncado, e não arredondado, em duas casas, para que 4,49 nunca apareça como 4,5.
Como usar
- Digite a cor, ou use o seletor.
- Copie o formato que precisa com o botão ao lado.
- Confira o contraste do texto branco e do preto sobre a cor.
Perguntas frequentes
Por que o HSL de uma cor mostra números inteiros?
Os valores são arredondados para a exibição. Quando você digita um HSL, a conversão interna usa os números exatos e só depois arredonda o RGB, que é inteiro por definição (0 a 255).
O que é o RGBA() do Power Apps?
É a função do Power Apps que recebe vermelho, verde e azul de 0 a 255 e a transparência de 0 a 1. A linha "Power Apps" da tabela já vem nesse formato, pronta para colar na propriedade de cor de um controle.
HEX de 4 dígitos?
#369F é a forma abreviada de #336699FF: os três primeiros dígitos são a cor e o último é a transparência.
Privacidade e limites
A conversão é local, sem envio a servidor. Só os nomes de cor básicos do CSS são reconhecidos (não os 140 nomes estendidos), e não há suporte a espaços de cor modernos como oklch() ou display-p3.