Escolha uma cor ou digite qualquer valor HEX, RGB ou HSL e obtenha todos os formatos na hora, mais trechos CSS prontos para copiar.
Todas as conversões acontecem localmente no seu navegador. Nada sai do seu dispositivo.
color: #3498db;background-color: rgb(52, 152, 219);background-color: hsl(204, 70%, 54%);Cada cor na tela é apenas um conjunto de números em um sistema de coordenadas. Os três sistemas abaixo descrevem as mesmas cores de formas diferentes: um código HEX, uma tripla RGB e uma tripla HSL para #3498db são exatamente o mesmo azul. Conhecer os três facilita ler especificações de design, depurar folhas de estilo e gerar variantes.
HEX é uma notação compacta em base 16 para valores RGB (#rrggbb). RGB mistura os canais vermelho, verde e azul, cada um de 0 a 255. HSL descreve a cor por tom, saturação e luminosidade, o que corresponde à forma como as pessoas pensam em cor e facilita ajustar matices e tons.
Os três funcionam em todos os navegadores modernos. HEX é o mais curto e o mais comum para a passagem do design para o desenvolvimento. RGB é conveniente quando você precisa construir um valor rgba() com alfa. HSL é o melhor quando você quer ajustar o brilho ou a intensidade de uma cor sem mudar o tom base.
Códigos curtos como #f0a são abreviaturas: cada dígito é duplicado, então #f0a se expande para #ff00aa. Esta ferramenta aceita HEX de 3 e 6 dígitos, com ou sem o # inicial.
O tom (0–360°) é mapeado para a roda de cores, e então a saturação e a luminosidade escalam a cor em direção ao cinza ou ao preto. As fórmulas padrão de HSV para RGB fazem o cálculo, e o resultado é arredondado para o inteiro 0–255 mais próximo em cada canal.
Sim. Enquanto você digita, a ferramenta analisa cada campo e só atualiza a amostra de cor e os demais campos quando o valor é válido. Números fora do intervalo, formatos mal formados ou componentes faltantes mantêm a última cor válida no lugar até você corrigir a entrada.
Depois de escolher uma cor, dê sequência ao fluxo: converta o valor com o Conversor de HEX para RGB, tire uma paleta direto de uma foto com o Conta-gotas de cores da imagem e veja como o resultado é percebido por todo mundo no Simulador de daltonismo antes de publicar.
Se você acabou de usar Conversor de cores, os próximos passos naturais são Gerador de paletas de cores, Verificador de contraste de cor, Gerador de gradientes CSS, ou explore todas as ferramentas de Ferramentas de arquivos.