Seletor de Cor
Escolha uma cor, ajuste valores HEX, RGB, HSL, HSV, OKLCH e CMYK e copie códigos para CSS e design.
O que faz Seletor de Cor?
Seletor de Cor ajuda a escolher uma cor precisa e a transformá-la em valores prontos para usar em interfaces, CSS, protótipos e sistemas de design. A área principal mostra a cor ativa, disponibiliza formatos como HEX, RGB, HSL, HSV, OKLCH e CMYK e deixa copiar códigos sem reconstruir manualmente cada valor. Isto é útil quando uma ideia visual já existe, mas ainda precisa de um valor técnico limpo para documentação, implementação ou partilha com outra pessoa da equipa.
A vantagem de trabalhar num único painel é comparar a mesma cor por perspetivas diferentes. HEX é compacto para CSS e documentação. RGB é direto para canais de ecrã. HSL ajuda a raciocinar sobre matiz, saturação e luminosidade. OKLCH pode ser útil quando o objetivo é comparar perceção visual de forma mais moderna. CMYK aparece como referência para conversas com materiais impressos, embora a decisão final de impressão dependa sempre do perfil usado pelo fornecedor.
Como usar Seletor de Cor
- Escolha ou ajuste a cor no painel principal até a pré visualização corresponder ao tom que pretende usar.
- Veja os formatos apresentados para a mesma cor, incluindo HEX, RGB, HSL, HSV, OKLCH e CMYK.
- Use as áreas de variações cromáticas para analisar tons mais claros, tons mais escuros e alternativas próximas.
- Abra as harmonias cromáticas quando precisar de combinações relacionadas para acentos, superfícies ou elementos secundários.
- Consulte a simulação de daltonismo quando a cor tiver impacto em leitura, estado visual ou identificação de elementos.
- Use a área de conversão para comparar códigos e copie o formato necessário para CSS, HTML ou documentação.
- Quando a cor for usada em texto ou botões, confirme o resultado com a opção de contraste antes de a aplicar em produção.
Quando usar um hex color picker
Um hex color picker é mais útil quando a decisão visual precisa de terminar num código curto e fiável. Em CSS, uma cor como #4F46E5 é fácil de guardar em variáveis, temas, componentes e guias de marca. O mesmo valor pode depois ser revisto noutros formatos sem perder a referência original. Para páginas web, botões, banners e estados de interface, isto reduz erros comuns como copiar um valor incompleto, trocar canais RGB ou usar um tom ligeiramente diferente em áreas semelhantes.
Seletor de Cor também é útil antes de criar uma paleta completa. Escolher primeiro uma cor principal permite testar acentos, superfícies, bordas, fundos e estados de interação com mais consistência. Depois de definir o tom principal, pode comparar variações e harmonias sem saltar entre várias ferramentas. O resultado é uma decisão visual mais controlada e mais fácil de explicar a designers, programadores ou clientes.
Formatos de cor que pode copiar
| Formato | Uso prático | O que verificar |
|---|---|---|
| HEX | Código curto para CSS, guias de estilo e documentação técnica. | Confirme se o valor começa por # quando o ambiente exige sintaxe CSS completa. |
| RGB | Leitura direta dos canais vermelho, verde e azul em ecrãs. | Verifique se cada canal está dentro do intervalo esperado de 0 a 255. |
| HSL | Ajustes intuitivos de matiz, saturação e luminosidade. | Use-o para criar variações coerentes sem alterar a identidade da cor. |
| OKLCH | Análise mais moderna de luminosidade, croma e matiz percebidos. | Teste compatibilidade se o código for usado diretamente em browsers ou sistemas antigos. |
| CMYK | Referência aproximada para conversas sobre impressão. | Valide sempre com o perfil de cor e o fornecedor antes da produção impressa. |
Escolher cores para interfaces
Uma cor bonita isolada pode falhar quando entra numa interface real. Antes de decidir, avalie a cor sobre fundos claros e escuros, em botões pequenos, em elementos de navegação e em textos de estado. Uma saturação forte pode funcionar como chamada à ação, mas tornar-se agressiva em áreas grandes. Uma cor suave pode parecer elegante num fundo branco, mas perder contraste quando usada como texto ou ícone.
Use variações para construir uma pequena escala: um tom principal, um tom para hover, um tom para superfície suave e uma opção mais escura para texto ou borda. Esta abordagem facilita consistência visual e reduz decisões improvisadas. Quando precisar de confirmar legibilidade, avance para Contraste de Cores e compare a cor com o fundo previsto.
Erros comuns a evitar
- Copiar apenas a aparência visual da cor e esquecer o formato que o projeto realmente precisa.
- Usar uma cor forte em texto pequeno sem verificar contraste.
- Escolher muitas variações parecidas, criando uma paleta difícil de manter.
- Assumir que CMYK no ecrã representa exatamente o resultado de impressão.
- Ignorar como a cor aparece em estados de foco, erro, sucesso ou desativado.
Como passar da cor única para uma paleta
Depois de escolher uma cor principal, o passo seguinte é testar relações. Harmonias ajudam a encontrar tons complementares ou vizinhos. Variações ajudam a criar profundidade dentro da mesma família. Se a inspiração vier de uma fotografia ou imagem de marca, Conta Gotas Online pode extrair cores diretamente do ficheiro antes de voltar ao seletor para ajustar cada valor. Esta sequência mantém o processo visual, mas termina em códigos técnicos claros.
Para resultados consistentes, guarde o HEX principal e documente também os formatos que a equipa usa com mais frequência. Se o design system trabalhar com tokens, escolha nomes funcionais como primary, surface, border e accent em vez de nomes baseados apenas na cor percebida. Assim, quando a paleta mudar, a função de cada cor continua clara.
Trabalhar com variações e harmonias
As variações cromáticas ajudam a perceber até onde uma cor pode ser clareada ou escurecida sem perder a sua identidade. Isto é importante para estados de interface. Um botão pode precisar de uma cor base, uma cor de hover, uma cor de foco e uma cor desativada. Se esses tons forem escolhidos manualmente sem comparação, o resultado pode parecer irregular. Ao rever variações a partir da cor ativa, consegue construir uma escala mais previsível e com menos decisões soltas.
As harmonias cromáticas respondem a outra necessidade: encontrar cores que convivam com a cor principal. Uma cor complementar pode criar contraste forte. Cores análogas podem criar um ambiente mais suave. Uma combinação triádica pode funcionar em gráficos ou ilustrações, mas precisa de hierarquia para não competir com o conteúdo. Use estas relações como ponto de partida e não como regra absoluta. O contexto do projeto continua a decidir se uma combinação é útil.
Usar a simulação de daltonismo com critério
A simulação de daltonismo é uma forma prática de antecipar problemas de distinção visual. Se duas cores parecem diferentes numa visão padrão, mas ficam muito parecidas numa simulação, talvez não sejam adequadas para comunicar estados importantes. Erro e sucesso, ativo e inativo, selecionado e não selecionado precisam de mais do que cor. Texto, ícones, padrões ou diferenças de forma podem reforçar a mensagem e tornar a interface mais robusta.
Esta revisão é especialmente importante em gráficos, etiquetas, badges, mapas e elementos que dependem de cores próximas. Mesmo quando o contraste de texto passa nos testes, a distinção entre duas áreas coloridas pode continuar fraca. Por isso, combine a simulação com uma análise do uso real da cor e confirme se a mensagem ainda é compreensível sem depender apenas do tom.
Preparar valores para uma equipa
Quando a cor será partilhada com outras pessoas, copie o valor no formato que elas realmente usam. Para programadores, HEX ou CSS RGB costumam ser mais práticos. Para designers, HSL pode facilitar ajustes. Para documentação, convém indicar a cor principal e explicar onde ela deve ser aplicada. Uma pequena nota sobre uso, por exemplo cor de ação primária ou fundo suave, evita que o mesmo código seja usado em contextos errados.
Também vale manter uma lista curta de cores aprovadas. Quanto mais valores semelhantes forem adicionados sem função clara, mais difícil fica manter consistência. Seletor de Cor ajuda a explorar muitas possibilidades, mas a decisão final deve reduzir a paleta ao que o projeto consegue usar de forma repetível.
Organizar a decisão cromática
Quando a cor fica aprovada, transforme a decisão num pequeno conjunto de referências. Guarde o código principal, o formato preferido para implementação e uma nota sobre o contexto de uso. Se a cor pertence a uma ação primária, não a reutilize automaticamente para avisos, gráficos ou elementos decorativos. A mesma cor pode ter significados diferentes quando aparece em vários locais, por isso a função deve ser tão clara como o valor técnico.
Em equipas pequenas, esta organização pode ser apenas uma lista simples. Em equipas maiores, pode entrar num sistema de tokens. O importante é evitar que cada página escolha uma cor parecida por preferência individual. Seletor de Cor facilita a exploração, mas a consistência nasce quando a equipa transforma a escolha num padrão reutilizável.
Revisão final antes de usar a cor
Antes de publicar, confirme três aspetos: o código copiado está no formato certo, a cor mantém legibilidade no contexto real e as variações escolhidas não criam conflitos com outros elementos. Se a cor for para marca, guarde a decisão com exemplos de uso. Se for para uma página específica, teste-a nos principais componentes da interface. Uma cor bem escolhida não é apenas um valor bonito, mas um valor consistente, legível e fácil de reutilizar.