Seletor de cores HEX

Converta qualquer cor HEX para RGB e HSL, ou escolha uma nova visualmente.

Roda no seu navegador
Sem uploads
Sem conta

Carregando a ferramenta no navegador…

O que faz: Seletor de cores HEX

Digite um código HEX, como #3157D5 ou a forma curta #35D, e a amostra e os valores RGB e HSL são atualizados enquanto você digita. Ou clique na amostra para abrir o seletor de cores do sistema e escolher uma cor no olho. É um jeito rápido de passar uma cor de uma ferramenta de design para rgb() no CSS, ou de ver como fica a versão completa de um HEX curto.

Não é preciso imagem. Se quiser pegar uma cor de uma captura de tela, abra Mais opções e solte a imagem ali. As escolhas recentes de uma imagem ficam salvas como amostras. Para analisar as cores de uma imagem inteira, use o Extrator de cor dominante.

Exemplo

Entrada

#35D

Resultado

HEX #3355DD
RGB rgb(51, 85, 221)
HSL hsl(228, 71%, 53%)

Cada dígito de um código de 3 dígitos é duplicado, então #35D é #3355DD.

Como usar: Seletor de cores HEX

Digite um código em HEX ou clique na amostra para escolher uma cor.
Leia os valores RGB e HSL abaixo da amostra grande.
Clique em Copiar para copiar o código HEX, ou copie RGB ou HSL dos campos deles.

Bom saber

Códigos HEX de 8 dígitos com alfa, como #3157D580, não são aceitos. Use os seis primeiros dígitos e defina a opacidade separadamente no CSS.
Nesta página, só HEX é aceito como entrada. A saída cobre HEX, RGB e HSL; não há CMYK nem Pantone.
Os valores HSL são arredondados para números inteiros, então convertê-los de volta pode errar por uma unidade em RGB.

Perguntas sobre Seletor de cores HEX

Como converto HEX para RGB?

Divida os seis dígitos em três pares e converta cada um da base 16 para a base 10. #3157D5 vira 31, 57 e D5, que são 49, 87 e 213. Digite o código aqui e rgb(49, 87, 213) aparece na hora.

O que é uma cor HEX de 3 dígitos?

É uma abreviação em que cada dígito é duplicado: #35D significa #3355DD, e #FFF significa #FFFFFF. Só funciona com cores cujos pares se repetem, então a maioria das cores de marca precisa dos seis dígitos.

Quando devo usar HSL em vez de HEX?

O HSL é mais fácil de ajustar à mão. Mudar só o último valor deixa uma cor mais clara ou mais escura, o que ajuda em estados de hover e em tons. O HEX é mais curto e é o que a maioria das ferramentas de design exporta.