Conversor de Cores

Como utilizá-lo

Uma cor na web é geralmente escrita num de três formatos: HEX, RGB ou HSL. HEX compacta uma cor numa única cadeia — um # seguido de seis dígitos hexadecimais, tomados aos pares para vermelho, verde e azul, cada par variando de 00 (nenhum) para FF (completo). RGB escreve os mesmos três canais como números simples em vez de pares hex, com vermelho, verde e azul cada um variando de 0 a 255. HSL toma um ângulo diferente: em vez de intensidades de canal, descreve a tonalidade como uma posição numa roda de cores de 360°, depois a saturação e a luminosidade como percentagens, que mapeiam muito mais naturalmente para a forma como as pessoas realmente pensam sobre a cor. Cada formato persiste porque é mais adequado a 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 exacta sem ambiguidade. RGB mapeia directamente para a forma como os ecrãs realmente produzem cor, misturando luz vermelha, verde e azul ao nível do pixel, e estende-se limpamente para rgba() adicionando um quarto canal alfa para transparência. HSL é aquela que os humanos usam ao ajustar uma cor em vez de a especificar do zero: aumentar ou diminuir a luminosidade dá uma tonalidade previsível mais clara ou mais escura, e deslizar a tonalidade move-se suavemente à volta da roda de cores para construir uma paleta correspondente. Um exemplo concreto esclarece a relação. Pegue num azul intermédio: como HEX é #3B82F6. Divida aos pares, 3B, 82 e F6 convertem do hexadecimal para decimal como 59, 130 e 246 — exactamente a mesma cor escrita como rgb(59, 130, 246). Converta esses mesmos valores vermelho, verde e azul em tonalidade, saturação e luminosidade e 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 amortecido, e 60% de luminosidade o coloca aproximadamente no meio da gama de luminosidade preta para branca. As três cadeias descrevem a cor de pixel idêntica. Para utilizar o conversor, escreva 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 selector de cores e escolha visualmente. Assim que uma cor válida é reconhecida, os outros dois formatos actualizam instantaneamente juntamente com uma amostra de pré-visualização em direto, para que possa confirmar que o resultado corresponde ao que espera antes de o copiar. Clique no ícone copiar junto a qualquer valor para o obter nesse formato exacto para colar em CSS, uma ferramenta de design ou código. Converter entre formatos surge constantemente no trabalho real: corresponder a cor exacta de uma marca quando um cliente entrega um código HEX mas a sua ferramenta de design quer deslizadores HSL, construir um tema CSS onde necessita de valores RGB consistentes para sobreposições rgba(), ajustar a luminosidade de uma cor base para cima ou para baixo alguns por cento para criar um estado de passagem ou activo convincente, e verificar que as cores do texto e do fundo têm contraste suficiente para acessibilidade comparando os 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 de seis dígitos hexadecimais, como #3B82F6. Os seis dígitos formam três pares, cada par definindo a intensidade do vermelho, verde e azul numa escala de 00 (nenhum) para FF (completo, 255 em decimal). Como é compacto e inequívoco, HEX é a forma mais comum de especificar cores exactas 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 forma como os ecrãs misturam luz para produzir cor. HSL descreve a mesma cor como tonalidade (a sua posição numa roda de cores de 360°), saturação (como vívida ou amortecida é) e luminosidade (como perto de preto ou branco). RGB é preciso para ecrãs; HSL é mais fácil para os 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 do hexadecimal para decimal para obter um número de 0 a 255. Por exemplo, #3B82F6 divide-se em 3B, 82 e F6, que se convertem em 59, 130 e 246, dando rgb(59, 130, 246). Este conversor faz a matemática instantaneamente conforme escreve.

O que faz o canal alfa?

O canal alfa controla a transparência, adicionado como um quarto valor juntamente com vermelho, verde e azul em rgba() ou hsla(), variando de 0 (completamente transparente) para 1 (completamente opaco). Permite que uma cor se misture com tudo o que fica atrás — útil para sobreposições, bordas subtis, ou atenuar um elemento sem alterar a sua cor subjacente. HEX também o suporta, como um 4º ou 8º par opcional de dígitos.