Extrair da imagem
Largar imagem aqui, colar (Ctrl+V), ou
Cores recentes
Seletor de cores Hex e extrator de imagens
Num fim de semana, passei demasiado tempo a tentar fazer corresponder um púrpura do logótipo de um cliente no Figma, só para me aperceber de que o código hexadecimal que tinha copiado e colado estava ligeiramente errado porque o tinha tirado de uma imagem JPEG comprimida em vez do ficheiro original. A diferença entre #895BF5 e #8B5CF6 é basicamente invisível no ecrã, a não ser que as coloquemos lado a lado num fundo branco, e aí é incrivelmente óbvio e irritante. Foi este tipo de coisas que me fez querer um seletor de cores que fizesse tudo num só lugar - pegar na cor, vê-la em todos os formatos, verificar como fica em relação ao texto, pronto. Utilize o acima, escolha a sua cor ou introduza uma imagem, e tem HEX, RGB, HSL, HSV e CMYK, tudo numa só tentativa.
O que está aqui dentro
O seletor principal dá-lhe um bloco de saturação-brilho com um seletor de matiz por baixo, o que é bastante normal, mas a parte que mais utilizo é a extração de imagens. É possível inserir uma captura de ecrã ou colar a partir da área de transferência e clicar em qualquer parte da imagem para obter as cores exactas - muito mais fiável do que ver no amostrador de cores do Photoshop, especialmente quando se está a trabalhar a partir de uma referência fotográfica ou de um recurso de marca que alguém lhe enviou como PNG. A faixa de cores recentes mantém visíveis as suas últimas escolhas, o que parece uma coisa pequena, mas poupa uma quantidade absurda de idas e vindas quando está a tentar criar uma paleta a partir do zero.
Cada cor é apresentada em cinco formatos: HEX, RGB, HSL, HSV e CMYK. Existe um botão “Copiar todos os formatos” se quiser colocar tudo de uma vez na área de transferência, o que é muito útil quando está a documentar um guia de estilo e precisa de colar todos os valores numa folha de cálculo ou numa tabela Notion. No ano passado, mantive uma folha de cálculo do Google com especificações de cores para cerca de quarenta sites diferentes e copiar e colar cada formato individualmente a partir do seletor de cores DevTools do Chrome estava a dar cabo de mim, era tão aborrecido para algo que deveria demorar um segundo.
A secção de harmonias de cores gera paletas complementares, análogas, triádicas, complementares divididas, tetrádicas e quadradas a partir de qualquer cor que tenha escolhido. Cada harmonia tem um botão “Copiar CSS” que lhe dá o conjunto completo como propriedades personalizadas CSS. Honestamente, os modos triádico e tetrádico são os que procuro quando preciso de um esquema de cores rapidamente - o complementar é demasiado óbvio para a maioria dos projectos, e o análogo pode parecer um pouco monótono, a não ser que esteja deliberadamente a optar por um aspeto monocromático adjacente. Dito isto, se estiver a construir algo que precisa de ser calmo ou coeso, o análogo é subestimado e funciona melhor do que as pessoas lhe dão crédito.
Há também uma faixa de matizes e sombras que gera variações mais claras e mais escuras da cor selecionada em passos iguais, que é o tipo de coisa que o Tailwind CSS faz automaticamente com as suas escalas de cor, mas que de outra forma teria de calcular manualmente ajustando o valor de luminosidade em HSL. A pré-visualização de contraste no topo mostra a sua cor com texto escuro e claro sobreposto, para que possa ver se passa nas verificações de acessibilidade - não é uma calculadora de rácio de contraste WCAG completa, por isso, se precisar de rácios exactos para conformidade, deve usar um verificador de contraste dedicado para isso. Mas, para uma verificação rápida enquanto escolhe as cores da marca ou os detalhes da interface do utilizador, é suficiente.
Uma coisa que gostaria de mencionar sobre os valores CMYK: são calculados a partir de RGB, o que significa que são aproximações. Se estiver a enviar algo para uma impressora comercial - cartões de visita, embalagens, o que quer que seja - tem de trabalhar num perfil de cor CMYK adequado no InDesign ou no Illustrator, e não converter a partir das cores do ecrã. O resultado CMYK aqui é ótimo para ter uma ideia aproximada do aspeto de uma cor em termos de impressão e é suficientemente próximo para maquetas digitais, mas não corresponde a uma amostra Pantone. Vale a pena saber.
FAQ
Qual é a diferença entre os formatos de cor HEX, RGB e HSL?
São três formas de descrever exatamente a mesma cor. HEX é um código de seis caracteres utilizado em CSS e ferramentas de design - #895BF5, por exemplo. O RGB divide a cor em valores de canal vermelho, verde e azul de 0 a 255, que é a forma como os ecrãs realmente processam a cor. HSL descreve a cor em termos de matiz (a posição da roda de cores, 0-360°), saturação (quão vívida é) e luminosidade (quão brilhante ou escura). A maioria dos programadores Web utiliza o HEX por defeito, porque é compacto, mas o HSL é indiscutivelmente mais intuitivo se estiver a tentar ajustar uma cor manualmente - aumentar a luminosidade em 10% é muito mais fácil de raciocinar do que adivinhar qual o canal RGB a alterar.
Posso extrair cores exactas de uma imagem carregada?
Sim - largue uma imagem na área de extração ou cole uma imagem da área de transferência com Ctrl+V e, em seguida, clique em qualquer parte da imagem para obter a cor nesse pixel. Tenha em atenção que, se a imagem for um JPEG comprimido, as cores que escolher podem estar ligeiramente desfasadas do original devido a artefactos de compressão. Isto é especialmente notório com gradientes e cores sólidas de marcas que tenham sido comprimidas em redes sociais. Para obter os resultados mais precisos, utilize um PNG ou um ficheiro de origem não comprimido.
Os valores CMYK são suficientemente exactos para impressão?
São aproximações. Os valores CMYK aqui apresentados são matematicamente convertidos a partir de RGB, que é um modelo de cor de ecrã - não tem em conta o comportamento da tinta, o papel ou o perfil de cor específico utilizado pela sua impressora. Para uma referência aproximada ou uma maquete digital, estes valores são perfeitamente adequados. Mas se estiver a enviar ficheiros para uma impressora comercial para cartões de visita ou embalagens, deve trabalhar num perfil CMYK dedicado no InDesign ou no Illustrator, idealmente com referências Pantone. A diferença entre o CMYK convertido em RGB e o resultado real da impressão pode ser surpreendentemente grande, especialmente com violetas brilhantes e verdes saturados que simplesmente não se reproduzem bem em CMYK.
Como é que as harmonias de cores funcionam?
As harmonias de cores baseiam-se em relações geométricas no círculo cromático. A complementar junta duas cores diretamente opostas uma à outra (como o roxo e o verde-amarelo), a análoga agrupa as cores vizinhas no círculo e a triádica coloca três cores uniformemente a 120° de distância. A matemática é feita em HSL - complementar apenas adiciona 180° ao matiz, triádico adiciona 120° e 240°, e assim por diante. Estes agrupamentos não são arbitrários, provêm de princípios da teoria da cor que têm sido utilizados na pintura e no design há séculos. O botão “Copiar CSS” exporta a harmonia completa como propriedades personalizadas, para que possa colocá-las diretamente numa folha de estilos.
A pré-visualização do contraste verifica a conformidade com a acessibilidade das WCAG?
Não totalmente. A pré-visualização mostra a sua cor com texto escuro e claro sobreposto, para que possa ver rapidamente se é legível, mas não calcula um número específico da relação de contraste. As WCAG 2.1 requerem um rácio mínimo de 4,5:1 para texto normal e 3:1 para texto grande. Se precisar de verificar esses números exactos para garantir a conformidade com a acessibilidade, um verificador de rácio de contraste dedicado dar-lhe-á os valores exactos e um resultado de aprovação/reprovação. A pré-visualização aqui é mais uma verificação rápida de sanidade enquanto escolhe as cores, não substitui uma auditoria adequada.