Conversor de Cores

Como usar

Uma cor na web é geralmente escrita em um dos três formatos: HEX, RGB ou HSL. HEX compacta uma cor em uma única sequência — um # seguido de seis dígitos hexadecimais, tomados em pares para vermelho, verde e azul, cada par variando de 00 (nenhum) a FF (completo). RGB especifica os mesmos três canais como números simples em vez de pares hexadecimais, com vermelho, verde e azul variando de 0 a 255. HSL tem uma abordagem diferente: em vez de intensidades de canal, descreve a tonalidade como uma posição em uma roda de cores de 360°, depois saturação e luminosidade como percentuais, que mapeiam muito mais naturalmente para como as pessoas realmente pensam sobre cor. Cada formato persiste porque é mais adequado para um trabalho diferente, não porque um substituiu os outros. HEX é compacto e fácil de colar em CSS ou uma ferramenta de design — seis caracteres capturam uma cor exata sem ambiguidade. RGB mapeia diretamente para como as telas realmente produzem cor, misturando luz vermelha, verde e azul no nível de pixel, e se estende limpiamente para rgba() adicionando um quarto canal alfa para transparência. HSL é aquele que os humanos usam quando ajustam uma cor em vez de especificá-la do zero: aumentar ou diminuir a luminosidade dá uma tonalidade previsivelmente mais clara ou mais escura, e deslizar a tonalidade se move suavemente ao redor da roda de cores para construir uma paleta correspondente. Um exemplo concreto deixa a relação clara. Pegue um azul médio: como HEX é #3B82F6. Dividido em pares, 3B, 82 e F6 convertem de hexadecimal para decimal como 59, 130 e 246 — exatamente a mesma cor escrita como rgb(59, 130, 246). Converta esses mesmos valores vermelho, verde e azul em tonalidade, saturação e luminosidade e você obtém hsl(217°, 91%, 60%): uma tonalidade de 217° fica no segmento azul da roda de cores, 91% de saturação significa que é um azul vívido e não apagado, e 60% de luminosidade o coloca aproximadamente no meio do intervalo de luminosidade de preto a branco. Todas as três sequências descrevem a cor de pixel idêntica. Para usar o conversor, digite uma cor na entrada em qualquer um dos três formatos — um código HEX, um valor rgb() ou um valor hsl() — ou clique no seletor de cores e escolha visualmente. Assim que uma cor válida é reconhecida, os outros dois formatos são atualizados instantaneamente juntamente com uma amostra de visualização ao vivo, para que você possa confirmar que o resultado corresponde ao esperado antes de copiá-lo. Clique no ícone de cópia próximo a qualquer valor para obtê-lo nesse formato exato para colar em CSS, uma ferramenta de design ou código. Conversão entre formatos surge constantemente em trabalho real: corresponder a cor exata de uma marca quando um cliente entrega um código HEX mas sua ferramenta de design quer controles deslizantes HSL, criar um tema CSS onde você precisa de valores RGB consistentes para sobreposições rgba(), ajustar a luminosidade de uma cor base para cima ou para baixo alguns pontos para criar um estado de passagem do mouse ou ativo convincente, e verificar que cores de texto e fundo têm contraste suficiente para acessibilidade comparando seus valores de luminosidade.

Perguntas frequentes

O que é um código de cor HEX?

Um código de cor HEX é um símbolo de hash seguido por seis dígitos hexadecimais, como #3B82F6. Os seis dígitos formam três pares, cada par definindo a intensidade de vermelho, verde e azul em uma escala de 00 (nenhum) a FF (completo, 255 em decimal). Porque é compacto e inequívoco, HEX é a forma mais comum de especificar cores exatas em CSS e ferramentas de design.

Qual é a diferença entre RGB e HSL?

RGB descreve uma cor como três intensidades de canal — vermelho, verde e azul, cada uma de 0 a 255 — correspondendo a como as telas misturam luz para produzir cor. HSL descreve a mesma cor como tonalidade (sua posição em uma roda de cores de 360°), saturação (quão vívida ou apagada ela é) e luminosidade (quão próxima de preto ou branco). RGB é preciso para telas; HSL é mais fácil para humanos ajustarem intuitivamente.

Como converto HEX para RGB?

Divida os seis dígitos HEX em três pares — o primeiro para vermelho, o segundo para verde, o terceiro para azul — e converta cada par de hexadecimal para decimal para obter um número de 0 a 255. Por exemplo, #3B82F6 se divide em 3B, 82 e F6, que convertem para 59, 130 e 246, dando rgb(59, 130, 246). Este conversor faz a matemática instantaneamente enquanto você digita.

O que o canal alfa faz?

O canal alfa controla a transparência, adicionado como um quarto valor junto com vermelho, verde e azul em rgba() ou hsla(), variando de 0 (totalmente transparente) a 1 (totalmente opaco). Permite que uma cor se misture com o que quer que fique atrás dela — útil para sobreposições, bordas sutis ou escurecer um elemento sem alterar sua cor subjacente. HEX também oferece suporte, como um par de dígitos quarto ou oitavo opcional.