Seletor de cores

O Seletor de cores é uma ferramenta gratuita que te permite escolher uma cor no navegador e obter o respetivo valor no formato pretendido.

Que resultado apresenta um seletor de cores?

Um seletor de cores apresenta 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, sendo os mais comuns hexadecimal, RGB, RGBA, HSL e HSLA.

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

• Os valores hexadecimais usam um cardinal seguido de algarismos hexadecimais, como #336699.
• Os valores RGB expressam normalmente cada canal através de um número entre 0 e 255, como rgb(51, 102, 153).
• Os valores HSL indicam um ângulo de matiz e valores percentuais de saturação e luminosidade, como hsl(210, 50%, 40%).
• Os formatos RGBA e HSLA acrescentam transparência. Um valor alfa de 0 corresponde a transparência total e 1 a opacidade total.

O CSS também permite usar nomes de cores, mas estes abrangem apenas um conjunto fixo e são menos adequados para tokens de design exatos. Em geral, os 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 se usa o seletor de cores?

Seleciona o campo Cor, escolhe o ponto pretendido no círculo cromático e utiliza o valor resultante no formato de que a tua aplicação necessita. Todo o processamento é efetuado no navegador e a cor introduzida nunca é enviada para um servidor.

Se estiveres a trabalhar numa interface existente, começa pelo formato que já é utilizado no código. Assim, evitas conversões desnecessárias e tornas os pedidos de integração mais fáceis de rever. Ao analisares dados de terceiros, confirma se os valores incluem opacidade antes de os substituíres por uma cor aparentemente equivalente.

Antes da implementação, um processo prático consiste em escolher ou reproduzir a cor pretendida, copiar a notação adequada e testá-la no estado real do componente. Verifica separadamente os estados normal, de passagem do cursor, de foco e desativado, pois a opacidade e os estilos herdados podem alterar o resultado final apresentado.

Como interpretar o resultado

Interpreta o resultado de acordo com o respetivo modelo de cor e verifica qualquer componente alfa antes de o copiares para o código. Em RGB, o valor de cada canal controla a intensidade do respetivo componente vermelho, verde ou azul. Em HSL, o 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 das cores é rigorosa quando utilizada em CSS ou em dados estruturados. Entre os erros mais comuns na edição manual encontram-se:

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

O seletor gera valores de cor, mas não funciona como um validador geral de CSS. Não confirma se uma declaração envolvente, um documento JSON ou um ficheiro de tema é válido. Por isso, os erros de sintaxe fora do valor da cor têm de ser verificados pelo analisador ou pela ferramenta de desenvolvimento adequada.

Exemplos de conversão de cores

Numa cor hexadecimal de seis algarismos, cada par corresponde ao vermelho, ao verde e ao azul. Por exemplo, as representações seguintes descrevem a mesma cor opaca.

Valor hexadecimal #336699

Equivalente RGB rgb(51, 102, 153)

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

O hexadecimal de três algarismos é uma forma abreviada. Cada algarismo é repetido para formar um valor de seis algarismos.

Valor hexadecimal abreviado #fff

Hexadecimal expandido #ffffff

Equivalente RGB rgb(255, 255, 255)

O hexadecimal de oito algarismos inclui o canal alfa depois dos pares correspondentes ao vermelho, verde e azul. Tem cuidado com sistemas que utilizem uma ordem de canais diferente ou não aceitem a notação de oito algarismos. Uma cor sólida visualmente idêntica também pode produzir um resultado diferente quando a opacidade é aplicada sobre outro fundo.

Que formato de cor devo escolher?

Escolhe a notação de cor que o destino já espera, a menos que exista uma razão clara para a alterar. O hexadecimal de seis algarismos é compacto e comum em variáveis CSS e ficheiros de tokens de design. O RGB é prático quando o software apresenta diretamente os valores dos canais, enquanto o HSL é útil para criar cores relacionadas através de ajustes à luminosidade ou à saturação.

• Usa hexadecimal de seis algarismos para uma cor opaca na Web quando forem importantes a concisão e a facilidade de leitura.
• Usa hexadecimal de oito algarismos apenas quando o ambiente de destino suportar explicitamente o canal alfa nessa notação.
• Usa RGB ou RGBA quando trabalhares individualmente com os canais vermelho, verde e azul.
• Usa HSL ou HSLA para criar variações programáticas de temas com base no matiz, na saturação ou na luminosidade.
• Usa o Conversor de cores quando já tiveres um valor e precisares de o converter, em vez de escolheres visualmente uma nova cor.

Não trates um valor RGB apresentado no ecrã como uma especificação para impressão. A impressão comercial pode exigir valores CMYK, um perfil de cor ICC, provas de impressão e a concordância da gráfica. Uma conversão matemática, por si só, não garante que uma cor impressa corresponda à apresentada num ecrã retroiluminado.

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. As conversões repetidas podem introduzir diferenças de arredondamento, inconsistências no uso de maiúsculas e minúsculas ou alterações desnecessárias aos ficheiros de origem.

Também pode ser preferível manter um token de design com nome, como uma variável de tema, em vez de o substituir por um valor literal. Os tokens preservam a relação entre componentes e permitem alterar uma cor de forma centralizada. Do mesmo modo, uma cor utilizada apenas por uma máquina não precisa de uma representação mais fácil de ler, a menos que alguém tenha de a analisar ou manter.

Nenhum seletor de cores consegue determinar, por si só, se uma escolha tem contraste suficiente, respeita uma especificação de marca ou continua distinguível por pessoas com deficiências na visão cromática. Verifica as combinações entre primeiro plano e fundo com uma ferramenta específica de contraste e analisa a interface no respetivo contexto.

Perguntas frequentes

Posso usar o resultado em variáveis CSS?

Sim, desde que a notação escolhida seja CSS válido nos navegadores e ferramentas de compilação que suportas. Guarda o valor completo numa propriedade personalizada e referencia-o depois com a função var(). Se o projeto manipular os canais separadamente, pode ser mais prático guardá-los de acordo com a convenção já utilizada no projeto.

Porque é que a mesma cor parece diferente noutro ecrã?

Os ecrãs variam em termos de calibração, brilho, tecnologia do painel e suporte da gama de cores. A gestão de cores do navegador e o perfil de visualização do sistema operativo também podem afetar a apresentação. Por isso, uma correspondência numérica não garante um aspeto físico idêntico em todos os dispositivos.

As letras maiúsculas e minúsculas alteram uma cor hexadecimal?

Não. Os algarismos hexadecimais de A a F não distinguem maiúsculas de minúsculas, pelo que #AABBCC e #aabbcc representam a mesma cor. Segue a convenção utilizada no repositório para evitar alterações meramente relacionadas com a formatação.

Um valor de cor pode incluir acentos ou caracteres não latinos?

As notações hexadecimal, RGB e HSL padrão utilizam algarismos, letras e sinais de pontuação ASCII. Os caracteres acentuados ou não latinos não fazem parte destas sintaxes numéricas de cor. Podem surgir nos nomes de variáveis ou nos metadados envolventes, desde que a linguagem e a codificação do ficheiro em causa os permitam.

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

Não. Uma cor totalmente transparente continua a ter valores de canal, mesmo que estes não sejam visíveis por si só. Esses canais ocultos podem ser relevantes durante animações, interpolações, composições ou alterações posteriores da opacidade. Mantém-nos quando a aplicação depender desse comportamento.

Devo arredondar os valores decimais dos canais?

Arredonda os canais de cor decimais e os valores alfa apenas para a precisão aceite pelo destino e necessária para obter resultados consistentes. Uma precisão excessiva torna os valores mais difíceis de rever, enquanto um arredondamento demasiado acentuado pode produzir uma pequena diferença de cor. Depois de arredondares, verifica o componente apresentado em relação ao fundo pretendido e aos respetivos estados de interação.