Seletor de cores

O Seletor de cores é uma ferramenta gratuita que permite escolher uma cor no navegador e obter seu valor no formato desejado.

O que o seletor de cores retorna?

O seletor de cores retorna uma representação numérica da cor escolhida no círculo cromático. A mesma cor visível pode ser expressa em vários formatos, principalmente hexadecimal, RGB, RGBA, HSL ou HSLA.

Esses formatos descrevem as cores de maneiras diferentes. Hexadecimal e RGB especificam os valores dos canais vermelho, verde e azul. O HSL usa matiz, saturação e luminosidade, o que pode facilitar ajustes sistemáticos. Os formatos com canal alfa também descrevem a opacidade.

• Os valores hexadecimais usam uma cerquilha seguida de dígitos hexadecimais, como #336699.
• Os valores RGB normalmente expressam cada canal como um número de 0 a 255, como rgb(51, 102, 153).
• Os valores HSL descrevem o ângulo da matiz e valores percentuais de saturação e luminosidade, como hsl(210, 50%, 40%).
• RGBA e HSLA acrescentam transparência. Um valor alfa de 0 indica transparência total, enquanto 1 indica opacidade total.

O CSS também aceita cores nomeadas, mas os nomes abrangem apenas um conjunto fixo e são menos adequados para tokens de design exatos. Em geral, valores numéricos gerados são mais fáceis de transferir entre sistemas de design, folhas de estilo e código de aplicações.

Como usar o seletor de cores?

Selecione o campo Cor, escolha o ponto desejado no círculo cromático e use o valor resultante no formato exigido pela sua aplicação. Todo o processamento acontece no navegador, e a cor informada nunca é enviada a um servidor.

Em uma interface existente, comece pelo formato que já é usado no código. Isso evita conversões desnecessárias e facilita a revisão de pull requests. Ao analisar dados de terceiros, verifique se os valores incluem opacidade antes de substituí-los por uma cor aparentemente equivalente.

Um fluxo prático antes da implantação é selecionar ou reproduzir a cor desejada, copiar a notação apropriada e testá-la no estado real do componente. Verifique separadamente os estados normal, hover, foco e desabilitado, pois a opacidade e os estilos herdados podem alterar o resultado final renderizado.

Como interpretar o resultado

Interprete o resultado de acordo com o modelo de cor e confira qualquer componente alfa antes de copiá-lo para o código. No RGB, o valor de cada canal controla a intensidade do respectivo componente vermelho, verde ou azul. No HSL, a matiz percorre um círculo cromático, enquanto a saturação controla a intensidade da cor e a luminosidade determina o equilíbrio entre preto e branco.

A sintaxe de cores é rígida quando usada em CSS ou em dados estruturados. Entre os erros comuns de edição manual estão:

• omitir a cerquilha no início de um valor hexadecimal em CSS;
• usar cinco ou sete dígitos hexadecimais, que não correspondem a comprimentos hexadecimais padrão válidos;
• inserir porcentagens quando uma implementação RGB espera números para os canais;
• esquecer as vírgulas na sintaxe RGB antiga ou misturar sintaxes antigas e modernas incompatíveis;
• copiar um valor com canal alfa para um software que aceita apenas hexadecimal de seis dígitos;
• usar vírgula decimal, como 0,5, quando o CSS exige ponto decimal, como 0.5.

O seletor gera valores de cor, mas não funciona como um validador geral de CSS. Ele não comprova que uma declaração ao redor do valor, um documento JSON ou um arquivo de tema seja válido. Portanto, erros de sintaxe fora do valor da cor ainda precisam ser verificados pelo analisador ou pela ferramenta de desenvolvimento apropriada.

Exemplos de conversão de cores

Em uma cor hexadecimal de seis dígitos, cada par representa vermelho, verde e azul. Por exemplo, as representações abaixo descrevem a mesma cor opaca.

Valor hexadecimal #336699

Equivalente em RGB rgb(51, 102, 153)

Equivalente em HSL hsl(210, 50%, 40%)

O hexadecimal de três dígitos é uma forma abreviada. Cada dígito é repetido para formar um valor de seis dígitos.

Valor hexadecimal abreviado #fff

Hexadecimal expandido #ffffff

Equivalente em RGB rgb(255, 255, 255)

O hexadecimal de oito dígitos inclui o canal alfa depois dos pares de vermelho, verde e azul. Tenha cuidado com sistemas que usam outra ordem de canais ou não aceitam a notação de oito dígitos. Uma cor sólida visualmente idêntica também pode produzir um resultado diferente quando a opacidade é aplicada sobre outro fundo.

Qual formato de cor devo escolher?

Escolha a notação de cor que o destino já espera, a menos que haja um motivo claro para alterá-la. O hexadecimal de seis dígitos é compacto e comum em variáveis CSS e arquivos de tokens de design. O RGB é conveniente quando o software apresenta diretamente os valores dos canais, enquanto o HSL é útil para criar cores relacionadas ajustando a luminosidade ou a saturação.

• Use hexadecimal de seis dígitos para uma cor opaca na web quando concisão e facilidade de leitura forem importantes.
• Use hexadecimal de oito dígitos somente quando o ambiente de destino aceitar explicitamente o canal alfa nessa notação.
• Use RGB ou RGBA ao trabalhar individualmente com os canais vermelho, verde e azul.
• Use HSL ou HSLA para criar variações programáticas de temas com base em matiz, saturação ou luminosidade.
• Use o Conversor de cores quando já tiver um valor e precisar convertê-lo, em vez de escolher visualmente uma nova cor.

Não trate um valor RGB exibido na tela como especificação para impressão. A impressão comercial pode exigir valores CMYK, um perfil de cores ICC, prova de impressão e alinhamento com a gráfica. Uma conversão matemática, por si só, não garante que a cor impressa corresponda à aparência em uma tela retroiluminada.

Quando não é necessário escolher ou converter uma cor?

Não é necessário escolher ou converter uma cor quando o valor existente já está no formato exigido pelo destino. Conversões repetidas podem introduzir diferenças de arredondamento, inconsistências entre letras maiúsculas e minúsculas ou alterações desnecessárias nos arquivos de origem.

Também pode ser melhor manter um token de design nomeado, como uma variável de tema, em vez de substituí-lo por um valor literal. Os tokens preservam a relação entre os componentes e permitem alterar uma cor de forma centralizada. Da mesma maneira, uma cor usada apenas por uma máquina não precisa de uma representação mais legível para pessoas, a menos que alguém precise inspecioná-la ou mantê-la.

Nenhum seletor de cores consegue determinar sozinho se uma escolha tem contraste suficiente, segue as especificações de uma marca ou continua distinguível para pessoas com deficiências na visão de cores. Verifique as combinações de primeiro plano e fundo com uma ferramenta específica de contraste e analise a interface em seu contexto.

Perguntas frequentes

Posso usar o resultado em variáveis CSS?

Sim, desde que a notação escolhida seja um CSS válido para os navegadores e as ferramentas de build compatíveis com o projeto. Armazene o valor completo em uma propriedade personalizada e faça referência a ela com a função var(). Se o projeto manipular os canais separadamente, pode ser mais prático armazená-los de acordo com a convenção já adotada.

Por que a mesma cor aparece diferente em outra tela?

As telas variam em calibração, brilho, tecnologia do painel e compatibilidade com gamas de cores. O gerenciamento de cores do navegador e o perfil de exibição do sistema operacional também podem afetar a renderização. Portanto, valores numéricos idênticos não garantem a mesma aparência física em todos os dispositivos.

Letras maiúsculas e minúsculas no hexadecimal mudam a cor?

Não. Os dígitos hexadecimais de A a F não diferenciam maiúsculas de minúsculas, então #AABBCC e #aabbcc representam a mesma cor. Siga a convenção de capitalização usada no repositório para evitar alterações apenas de formatação.

Um valor de cor pode ter caracteres acentuados ou não latinos?

As notações padrão hexadecimal, RGB e HSL usam dígitos, letras e sinais de pontuação ASCII. Caracteres acentuados ou não latinos não fazem parte dessas sintaxes numéricas de cor. Eles podem aparecer nos nomes de variáveis ou nos metadados ao redor do valor, desde que a linguagem e a codificação do arquivo permitam.

Uma cor transparente é o mesmo que não ter cor?

Não. Mesmo uma cor totalmente transparente mantém valores de canais, embora eles não sejam visíveis por si só. Esses canais ocultos podem ser importantes durante animações, interpolações, composições ou alterações posteriores de opacidade. Portanto, preserve-os quando a aplicação depender desse comportamento.

Devo arredondar valores decimais dos canais?

Arredonde os canais de cor decimais e os valores alfa apenas até a precisão aceita pelo destino e necessária para manter a consistência do resultado. Precisão excessiva dificulta a revisão dos valores, enquanto um arredondamento agressivo pode causar uma pequena diferença de cor. Depois de arredondar, confira o componente renderizado sobre o fundo previsto e em seus diferentes estados de interação.