CONTACT US
marketing@toolspivot.comADDRESS
Ward No.1, Nehuta, P.O - Kusha, P.S - Dobhi, Gaya, Bihar, India, 824220
O seletor de cores do ToolsPivot é uma ferramenta online grátis que permite escolher qualquer cor a partir de um espectro interativo e copiar o código HEX, RGB ou HSL com um clique. Diferente do Coolors e do Adobe Color, que exigem cadastro para salvar paletas, o ToolsPivot oferece seleção ilimitada, controle de transparência alfa e montagem de paleta direto no navegador, sem criar conta.
Escolha a matiz: Arraste a barra de arco-íris na parte inferior da ferramenta para selecionar sua cor base no espectro completo de 0° a 360°.
Clique no campo de gradiente: Clique em qualquer ponto da área grande de gradiente para pegar uma tonalidade específica. Mover para a esquerda ou direita altera a saturação; mover para cima ou para baixo ajusta a luminosidade.
Ajuste com os sliders: Use os controles deslizantes de H, S e L para refinar a seleção. Também é possível digitar valores exatos nos campos RGB para controle preciso pixel a pixel.
Defina a transparência: Arraste o slider de alfa se o projeto exige cores semitransparentes. A ferramenta gera códigos HEXA de 8 dígitos automaticamente quando a opacidade fica abaixo de 100%.
Copie o código: Clique no ícone de copiar ao lado do valor HEX, RGB ou HSL. O código vai direto para a área de transferência, pronto para colar no CSS, no Figma ou em qualquer editor.
Salve na paleta: Adicione cada cor à grade de paleta abaixo do seletor. Monte um esquema completo de 5 a 8 cores antes de levar tudo para o projeto.
A ferramenta combina um espectro visual interativo com sliders de precisão e saída em múltiplos formatos. Veja o que você encontra ao abrir o seletor.
Espectro interativo de cores: Um campo de gradiente em largura total mostra todas as combinações possíveis de saturação e luminosidade para a matiz selecionada. Clique em qualquer ponto para capturar a cor.
Barra de matiz (hue bar): Uma faixa arco-íris que vai do vermelho (0°) ao verde (120°), azul (240°) e volta ao vermelho. Arrastar essa barra muda toda a paleta do campo de gradiente.
Controles HSL: Sliders separados para matiz, saturação (0-100%) e luminosidade (0-100%). Quem precisa de valores exatos em vez de "chutar no olho" usa esses controles.
Slider de opacidade alfa: Controle dedicado que vai de totalmente opaco a totalmente transparente. Quando o alfa fica abaixo de 100%, a saída muda automaticamente para o formato HEXA de 8 dígitos.
Campos numéricos RGB: Três campos (0-255 por canal) para vermelho, verde e azul. Digite os valores quando já tiver os números de um arquivo CSS ou manual de identidade visual.
Exibição do código HEX: Mostra o código hexadecimal padrão de 6 caracteres (#RRGGBB), usado em praticamente todo projeto web. Um clique copia.
Coordenadas HSL: Exibe graus de matiz, porcentagem de saturação e porcentagem de luminosidade lado a lado. O modelo HSL facilita a criação de variações claras e escuras de uma mesma cor.
Grade de paleta: Área onde você salva as cores conforme vai selecionando. Serve para montar uma identidade visual completa ou um sistema de cores para interface antes de partir para o código.
Comparação lado a lado: Uma zona dedicada para colocar duas ou mais cores juntas. Teste combinações, confira contraste e decida antes de aplicar no projeto.
Alternância HSV/HSL: Troque entre HSV (Matiz, Saturação, Valor) e HSL (Matiz, Saturação, Luminosidade) dependendo do modelo que seu fluxo de trabalho de design usa.
Seletores de cor grátis existem aos montes na internet. O problema é que a maioria cobra para salvar paletas, ignora transparência ou exige instalar software. O ToolsPivot resolve tudo isso de uma vez.
Sem conta e sem limites: Selecione e salve quantas cores quiser sem criar cadastro. No Coolors, por exemplo, paletas salvas são limitadas para quem não paga. Aqui não existe essa trava.
Três formatos ao mesmo tempo: Cada cor selecionada exibe os valores HEX, RGB e HSL simultaneamente. Não precisa abrir um conversor de RGB para HEX separado nem fazer conta de cabeça.
Transparência nativa: O slider de alfa gera saídas RGBA e HEXA automaticamente. Se você trabalha com efeitos de vidro, sobreposições ou camadas semitransparentes em UI, esse recurso economiza uma etapa inteira.
Funciona no navegador: Nada para instalar ou baixar. Roda em Chrome, Firefox, Safari e Edge, no desktop e no celular. Ideal para freelancers que trabalham em máquinas diferentes sem querer instalar software em cada uma.
Montagem de paleta integrada: Salve cores na grade enquanto explora o espectro. Monte um esquema de 5 a 8 cores numa sessão só, sem alternar entre aplicativos ou colar códigos numa planilha.
Precisão quando importa: Alterne entre seleção visual (clique no espectro) e entrada numérica (digite valores RGB). Um manual de marca pode trazer números exatos; um projeto novo pode começar pela exploração visual. A ferramenta atende os dois cenários.
Integra com outras ferramentas do ToolsPivot: Pegue um código HEX aqui e use no editor HTML online, aplique na criação de favicons ou mantenha consistência com as tags Open Graph dos seus links compartilhados.
Cada formato de cor existe por um motivo. Saber quando usar qual evita retrabalho na hora da implementação.
HEX é o padrão para trabalho web. Folhas de estilo CSS, atributos HTML e a maioria dos frameworks esperam o formato de 6 caracteres #RRGGBB. Existem 16.777.216 combinações hexadecimais possíveis, cobrindo todo o espaço de cores RGB em uma string compacta. Se você está escrevendo código para um site, HEX é quase sempre o que vai colar.
RGB mapeia diretamente a forma como telas exibem cores. Cada canal (vermelho, verde, azul) aceita um valor de 0 a 255. Funções JavaScript como rgba() e bibliotecas de animação normalmente pedem RGB. É também o formato que softwares de design como Photoshop, Figma e Sketch expõem para correspondência de cores entre arquivos. Quem trabalha em um projeto JavaScript provavelmente vai preferir RGB.
HSL é o modelo mais intuitivo para humanos. A matiz define o tipo de cor (0-360°), a saturação controla a vivacidade (0-100%) e a luminosidade ajusta o brilho (0-100%). Quer uma versão mais escura do azul da sua marca? Basta diminuir a luminosidade em 15%. Precisa de uma versão apagada? Reduza a saturação. O CSS aceita hsl() nativamente, e o modelo está ganhando popularidade entre desenvolvedores que constroem design tokens e sistemas de temas.
Regra prática: use HEX para CSS estático, RGB para JavaScript e ferramentas de design, e HSL quando estiver criando variações de cor ou temas claro/escuro.
| Formato | Exemplo | Melhor Para | Suporta Transparência |
|---|---|---|---|
| HEX | #2563EB | CSS, HTML, temas WordPress | Sim (HEXA de 8 dígitos) |
| RGB | rgb(37, 99, 235) | JavaScript, Figma, Photoshop | Sim (rgba) |
| HSL | hsl(217, 83%, 53%) | Design tokens, dark mode, variações | Sim (hsla) |
| HSV | hsv(217, 84%, 92%) | Teoria de cores, softwares tradicionais | Não |
A maioria dos projetos precisa de 5 a 8 cores. Isso se divide em uma cor primária de marca, uma ou duas secundárias, um destaque (accent) e 2 a 3 neutros. A grade de paleta do seletor foi feita exatamente para esse fluxo.
Comece selecionando a cor primária. Geralmente é a que carrega a associação emocional mais forte com a marca ou o produto. Salve na paleta. Depois, mova o slider de matiz entre 30° e 60° para qualquer lado, mantendo saturação e luminosidade próximas dos valores originais. O resultado é uma cor análoga que parece relacionada sem ser idêntica. Salve também.
Para o destaque, pule 180° a partir da matiz primária. Cores complementares criam tensão visual que atrai o olhar. Use com moderação: botões, links, chamadas para ação. Para os neutros, reduza a saturação em 80-90% e ajuste a luminosidade entre 20% e 90%. Esses tons formam a base de textos, bordas e fundos.
Antes de finalizar, use a zona de comparação para colocar a cor primária e o destaque lado a lado. A recomendação do WCAG 2.1 é uma proporção de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Se o cinza claro com texto branco parecer lavado na prévia, diminua a luminosidade do cinza alguns pontos. O verificador de legibilidade pode ajudar a conferir a clareza do texto depois que as cores estiverem em produção.
O briefing diz "azul moderno, visual limpo". Em vez de chutar códigos hex, o dev abre o seletor, explora a faixa azul (matiz 200-240°), e trava a cor primária em #2563EB com saturação de 84% e luminosidade de 53%. Cria quatro variações de luminosidade para estados de hover, elementos desabilitados e fundos. Tempo total: menos de cinco minutos. Os códigos HEX exportados vão direto para custom properties do CSS.
Um pequeno lojista quer cores sazonais para o banner e botões da loja no Shopify. Ele escolhe uma paleta de outono com laranjas quentes e vermelhos profundos usando o espectro, salva 6 cores na grade e copia os códigos HEX para o editor de tema do Shopify. Nenhum software de design necessário. Depois, pode rodar a página pelo verificador de velocidade para garantir que a nova imagem do banner não está pesando no carregamento.
Um designer de produto em uma empresa SaaS precisa de versões dark mode de 12 cores de UI existentes. Ele insere cada código HEX no seletor, reduz a luminosidade em 40-50% e aumenta levemente a saturação para compensar a percepção de cores "apagadas" em fundos escuros. O modelo HSL torna esse processo sistemático. Cada cor ajustada é salva, gerando um conjunto completo de tokens de tema escuro em cerca de 15 minutos.
A coordenadora de marketing precisa do roxo exato da marca para Google Slides, Canva e uma landing page em WordPress. Cada plataforma aceita formatos diferentes. Ela insere o HEX da marca (#7C3AED) uma vez, e a ferramenta mostra RGB(124, 58, 237) para o Canva e HSL(263, 83%, 58%) para o CSS. Uma ferramenta, três formatos, zero conversão manual. Na mesma sessão, pega os valores hexadecimais das cores secundárias e testa opções de fundo antes de subir as imagens.
Um microempreendedor individual que vende doces artesanais pelo Instagram e WhatsApp precisa definir as cores da marca para cartão de visitas, posts e embalagens. Sem verba para contratar designer, ele abre o seletor, escolhe um rosa quente como primária, gera uma paleta análoga e complementar, e anota os códigos. Usa os mesmos HEX no Canva para posts e no gerador de QR Code para o link do cardápio. Identidade visual básica pronta em 20 minutos.
Cor não é só questão de gosto. Escolhas erradas prejudicam legibilidade, acessibilidade e conversão. Algumas orientações práticas ajudam a evitar os erros mais comuns.
Limite a paleta primária a 3 cores no máximo. Projetos com 7 ou 8 cores ativas (sem contar neutros) confundem o olhar e diluem a identidade da marca. Três cores de impacto, mais 2-3 cinzas, cobrem 95% das necessidades de interface.
Teste em fundos claros e escuros. Uma cor que parece vibrante sobre branco pode sumir sobre cinza escuro. Use a comparação lado a lado do seletor para conferir antes de aplicar. Segundo dados do WebAIM, cerca de 96% das home pages apresentam falhas de contraste de cor, o que reforça a necessidade de testar cada combinação.
Considere daltonismo. Aproximadamente 8% dos homens e 0,5% das mulheres possuem algum tipo de deficiência na percepção de cores. Evite depender só de vermelho e verde para transmitir informação. Complemente com ícones, rótulos ou padrões.
Salve os códigos em algum lugar acessível. Copiar o HEX no seletor é rápido, mas se você não registrar os valores da paleta final, vai acabar recriando tudo do zero na próxima semana. Uma planilha simples ou um arquivo de texto com os códigos resolve. Quem trabalha com schema markup pode até incluir a cor da marca nas meta tags do site para reforçar a identidade nos buscadores.
Sim, 100% grátis, sem cadastro e sem limite de uso. Você pode selecionar, comparar e salvar quantas cores quiser na mesma sessão. Todos os formatos de saída (HEX, RGB, HSL) ficam disponíveis sem restrição.
HEX usa 6 caracteres hexadecimais (#RRGGBB) e é o padrão para CSS e HTML. RGB define a cor por três canais numéricos de 0 a 255 e é comum em JavaScript e softwares de design. HSL descreve a cor por matiz, saturação e luminosidade, sendo mais intuitivo para criar variações claras e escuras.
Funciona. A ferramenta roda direto no navegador e se adapta a telas menores. Você pode arrastar os sliders e clicar no espectro normalmente em smartphones e tablets com Chrome, Safari ou Firefox.
Clique no ícone de copiar ao lado do valor HEX, RGB ou HSL. O código vai para a área de transferência do dispositivo automaticamente. Basta colar no editor de código, no Figma, no Canva ou em qualquer aplicativo que aceite códigos de cor.
Pode. A grade de paleta permite salvar múltiplas cores enquanto você explora o espectro. Monte um esquema de 5 a 8 cores (primária, secundárias, destaque e neutros) e copie todos os códigos de uma vez para o seu projeto ou manual de identidade visual.
As cores salvas na grade ficam disponíveis durante a sessão do navegador. Se você fechar a aba, a paleta não persiste. Para preservar os códigos, copie os valores HEX ou RGB para um documento ou planilha antes de sair.
Sim. O slider de opacidade vai de 100% (totalmente opaco) até 0% (totalmente transparente). Quando a opacidade fica abaixo de 100%, a ferramenta gera automaticamente códigos HEXA de 8 dígitos e RGBA, prontos para uso em CSS com efeitos de sobreposição ou vidro.
HSV (Matiz, Saturação, Valor) e HSL (Matiz, Saturação, Luminosidade) representam cores de formas ligeiramente diferentes. No HSV, "valor" mede o brilho máximo da cor. No HSL, "luminosidade" distribui o brilho de forma mais linear. O seletor permite alternar entre os dois modelos conforme a preferência do seu fluxo de trabalho.
Pode. Use os campos numéricos RGB para inserir valores exatos. A ferramenta converte automaticamente para HEX e HSL. Se o manual da marca já fornece os números, digite diretamente em vez de tentar localizar a cor no espectro visual.
Para seleção individual de cores, conversão entre formatos e montagem de paletas básicas, sim. O ToolsPivot não exige conta e não limita funcionalidades grátis. Coolors e Adobe Color oferecem recursos extras como exportação para arquivos ASE ou integração direta com bibliotecas do Creative Cloud, mas cobram por parte desses recursos.
Copie o código HEX da cor no seletor e cole no campo de cor do personalizador do tema WordPress. A maioria dos temas aceita códigos HEX diretamente. Para ajustes em CSS personalizado, use o valor HSL ou RGB conforme a necessidade. O detector de tema WordPress pode ajudar a identificar quais cores o tema original usa antes de fazer alterações.
O formato HEX cobre 16.777.216 cores (256 valores por canal, elevados à terceira potência). Cada par de caracteres no código (#RRGGBB) representa a intensidade de vermelho, verde e azul, indo de 00 (mínimo) a FF (máximo). Isso abrange todo o espectro visível em telas digitais.
WCAG (Web Content Accessibility Guidelines) são diretrizes de acessibilidade para conteúdo web. Elas recomendam uma proporção de contraste mínima de 4,5:1 entre texto e fundo. Escolher cores sem conferir essa proporção pode tornar o conteúdo ilegível para pessoas com baixa visão ou daltonismo. O verificador de SEO pode sinalizar problemas de acessibilidade no site todo.
O seletor de cores do ToolsPivot trabalha com o espectro interativo e entrada manual de valores, não com upload de imagens. Para extrair cores de uma foto ou logo, use uma ferramenta de conta-gotas (eyedropper) do navegador, anote o código HEX resultante e depois insira no seletor para ajustar saturação, luminosidade e montar a paleta completa.
CONTACT US
marketing@toolspivot.comADDRESS
Ward No.1, Nehuta, P.O - Kusha, P.S - Dobhi, Gaya, Bihar, India, 824220Direitos de Autor © 2018-2026 por ToolsPivot.com. Todos os Direitos Reservados.