As ferramentas de cor do ToolDeck permitem converter entre formatos de cor, verificar razões de contraste de acessibilidade, gerar paletas, criar gradientes CSS e pesquisar nomes de cores ou classes Tailwind diretamente no seu navegador. O Conversor de Cores suporta HEX, RGB, HSL e HSV nos dois sentidos. O Verificador de Contraste testa a conformidade com WCAG 2.1 AA e AAA. O Gerador de Paletas cria esquemas complementares, análogos, triádicos e tetrádicos a partir de qualquer cor base. O Gerador de Gradiente CSS gera código pronto para usar com gradientes lineares e radiais. O Localizador de Nome de Cor encontra o nome CSS mais próximo para qualquer valor, e o Localizador de Cor Tailwind mapeia cores arbitrárias para classes utilitárias Tailwind. Todas as ferramentas funcionam no lado do cliente, sem enviar dados a nenhum servidor.
O Que São Ferramentas de Cor?
Ferramentas de cor são utilitários que ajudam desenvolvedores e designers a trabalhar com valores de cor digitais. Toda cor na tela é armazenada como números: três canais para RGB (vermelho, verde, azul), um triplo hexadecimal para a notação abreviada do CSS, ou matiz angular mais saturação e luminosidade para HSL. Converter entre essas representações manualmente é lento e sujeito a erros, especialmente quando também é preciso considerar a transparência alfa ou modelos mais recentes como OKLCH.
Além da conversão de formatos, o trabalho com cores envolve testes de acessibilidade, criação de paletas e construção de gradientes. O WCAG 2.1 define razões de contraste mínimas (4,5:1 para texto normal no nível AA, 7:1 para AAA) que são difíceis de verificar visualmente. Gerar esquemas de cores harmoniosos requer cálculos precisos de ângulos na roda de cores HSL. Gradientes CSS precisam de sintaxe correta para direção, paradas de cor e valores de fallback. Fazer qualquer coisa disso manualmente em um design system com dezenas de tokens se torna tedioso rapidamente.
Ferramentas de cor automatizam essas tarefas. Elas recebem uma cor em um formato, calculam a matemática e retornam o resultado de que você precisa, seja um valor convertido, um veredicto de aprovação/reprovação de acessibilidade, um conjunto de amostras harmoniosas ou um trecho de código CSS. Quando a ferramenta roda no navegador, você também evita fazer upload de tokens de design sensíveis para serviços de terceiros.
Por Que Usar Ferramentas de Cor no ToolDeck?
As ferramentas de cor do ToolDeck rodam inteiramente no seu navegador. Nenhum valor de cor sai do seu computador, nenhuma conta é necessária e cada ferramenta carrega instantaneamente sem instalar extensões ou software para desktop.
🎨Converta formatos em uma etapa
Cole um código HEX e obtenha os valores RGB, HSL e HSV simultaneamente. Sem necessidade de encadear vários conversores ou memorizar fórmulas de conversão.
🔒Mantenha os design tokens privados
Todo o processamento acontece no lado do cliente. As cores da sua marca, decisões de paleta ainda não lançadas e os valores internos do seu design system ficam no seu dispositivo.
♿Teste a acessibilidade instantaneamente
Verifique qualquer par de primeiro plano/plano de fundo em relação aos limites WCAG 2.1 AA e AAA para texto normal e texto grande. Obtenha a razão de contraste exata, não apenas um rótulo de aprovação/reprovação.
⚡Copie saídas prontas para produção
Cada ferramenta gera valores que você pode colar diretamente em CSS, na configuração do Tailwind ou nos campos de entrada de ferramentas de design. Sem necessidade de reformatar.
Casos de Uso das Ferramentas de Cor
Aqui estão seis cenários comuns em que as ferramentas de cor do ToolDeck economizam tempo.
Manutenção de Design System
Ao atualizar um design system, você frequentemente recebe cores em HEX de um designer, mas precisa de HSL para propriedades customizadas do CSS. O
Conversor de Cores traduz entre formatos para que você possa preencher arquivos de tokens sem fazer cálculos manuais.
Auditorias de Acessibilidade
Durante uma auditoria de conformidade com WCAG, cada combinação de texto/plano de fundo deve atender às razões de contraste mínimas. O
Verificador de Contraste de Cores exibe a razão exata e o status de aprovação AA/AAA para tamanhos de texto normal e grande.
Exploração de Paleta de Marca
Partindo de uma única cor de marca, você precisa de variantes de destaque e neutras. O
Gerador de Paletas de Cores calcula harmonias complementares, análogas, triádicas e tetrádicas para que você possa avaliar as opções antes de definir uma paleta.
Estilização de Fundo com CSS
Construir uma seção hero ou fundo de card com gradiente requer sintaxe CSS correta para ângulos, paradas de cor e prefixos de fornecedor. O
Gerador de Gradientes CSS permite construir o gradiente visualmente e copiar o código.
Migração para Tailwind
Ao migrar um projeto para Tailwind CSS, você precisa mapear os valores HEX ou RGB existentes para a classe utilitária Tailwind mais próxima. O
Localizador de Cores Tailwind encontra a correspondência mais próxima e exibe a diferença para que você decida se a aproximação é aceitável.
Revisão de Código e Documentação
Durante uma revisão de código, um valor HEX bruto como #708090 não diz nada à primeira vista. O
Localizador de Nomes de Cores o identifica como SlateGray, tornando as revisões e a documentação mais legíveis.
Referência de Modelos de Cor CSS
O CSS suporta múltiplos modelos de cor. A tabela abaixo resume os seis formatos mais comuns, sua sintaxe e casos de uso típicos. Todos eles são suportados pelo Conversor de Cores do ToolDeck.
| Modelo | Sintaxe CSS | Canais | Intervalo de Valores | Uso Típico |
|---|
| HEX | #rrggbb | Vermelho, Verde, Azul | 00–ff por canal | Mais comum em CSS, entregas de design, diretrizes de marca |
| RGB | rgb(r, g, b) | Vermelho, Verde, Azul | 0–255 por canal | JavaScript canvas API, estilos calculados, processamento de imagens |
| HSL | hsl(h, s%, l%) | Matiz, Saturação, Luminosidade | 0–360 / 0–100% / 0–100% | Design tokens, geração de temas, variantes de tom programáticas |
| HSV | N/A (não existe em CSS) | Matiz, Saturação, Valor | 0–360 / 0–100% / 0–100% | Seletores de cor (Photoshop, Figma), calibração de cor de hardware |
| OKLCH | oklch(L C H) | Luminosidade, Croma, Matiz | 0–1 / 0–0,4 / 0–360 | Paletas perceptualmente uniformes (especificação CSS Color Level 4) |
| Named | ex.: slategray | Mapeado para RGB internamente | 148 nomes predefinidos | Prototipagem, código legível, demonstrações rápidas |
O CSS Color Level 4 (W3C) também define as funções lab(), lch() e color(). HEX e RGB continuam sendo os formatos mais amplamente suportados em navegadores e ferramentas de design.
Como Escolher a Ferramenta de Cor Certa
Cada ferramenta de cor resolve um problema diferente. Use o guia abaixo para encontrar a ideal para sua tarefa.
- 1
Se você precisa converter uma cor entre os formatos HEX, RGB, HSL ou HSV → Conversor de Cores - 2
Se você precisa verificar se um par de cores de texto/plano de fundo atende aos padrões de acessibilidade WCAG → Verificador de Contraste de Cores - 3
Se você precisa gerar um conjunto de cores harmoniosas a partir de uma única cor base → Gerador de Paletas de Cores - 4
Se você precisa construir um gradiente CSS linear ou radial e obter o código → Gerador de Gradientes CSS - 5
Se você precisa encontrar o nome CSS legível mais próximo de um determinado valor de cor → Localizador de Nomes de Cores - 6
Se você precisa mapear uma cor arbitrária para a classe utilitária Tailwind CSS mais próxima → Localizador de Cores Tailwind
Todas as seis ferramentas aceitam entrada em múltiplos formatos. Se você não tem certeza em qual formato está sua cor, comece com o Conversor de Cores, que detecta automaticamente as notações HEX, RGB, HSL e HSV.
Perguntas Frequentes
Qual é a diferença entre os formatos de cor HEX e RGB?
HEX e RGB representam o mesmo espaço de cor. Um código HEX como #ff6600 é uma codificação hexadecimal dos três canais RGB: ff = 255 (vermelho), 66 = 102 (verde), 00 = 0 (azul). A única diferença é a notação. HEX é mais compacto em folhas de estilo CSS, enquanto RGB é mais fácil de manipular programaticamente porque cada canal já é um número inteiro decimal.
Quando devo usar HSL em vez de HEX ou RGB?
HSL separa o matiz (a cor em si) da saturação e da luminosidade. Isso facilita a criação de variantes de tom: mantenha o matiz fixo, reduza a luminosidade para um tom mais escuro ou aumente para um tom mais claro. Design systems que geram temas claro/escuro a partir de uma única cor base frequentemente armazenam tokens em HSL por esse motivo. Propriedades customizadas do CSS também funcionam bem com HSL porque é possível sobrescrever canais individuais.
Qual razão de contraste o WCAG 2.1 exige para texto?
O WCAG 2.1 Nível AA exige uma razão de contraste mínima de 4,5:1 para texto normal (abaixo de 18pt ou 14pt em negrito) e 3:1 para texto grande (18pt+ ou 14pt+ em negrito). O Nível AAA eleva esses limites para 7:1 e 4,5:1 respectivamente. Essas razões são calculadas a partir da luminância relativa das cores de primeiro plano e plano de fundo usando a fórmula definida no Critério de Sucesso 1.4.3 do WCAG 2.1.
Quantas cores nomeadas o CSS suporta?
O CSS define 148 cores nomeadas, herdadas das especificações SVG 1.1 e CSS3 de cores. Elas vão de nomes comuns como red, blue e white a nomes específicos como MediumSlateBlue, PapayaWhip e LavenderBlush. As cores nomeadas mapeiam para valores RGB fixos. A especificação CSS Color Level 4 mantém os mesmos 148 nomes e não adiciona novos. Os navegadores também reconhecem a palavra-chave transparent (equivalente a rgba(0,0,0,0)).
Posso usar cores OKLCH em CSS hoje?
Sim. A função oklch() é suportada no Chrome 111+, Firefox 113+ e Safari 15.4+. OKLCH faz parte da especificação CSS Color Level 4 publicada pelo W3C. Sua principal vantagem sobre HSL é a uniformidade perceptual: duas cores com o mesmo valor de luminosidade em OKLCH parecem igualmente brilhantes ao olho humano, o que não é verdade para HSL. Isso torna OKLCH uma escolha melhor para gerar paletas acessíveis com brilho percebido consistente.
Qual é a diferença entre HSL e HSV?
HSL e HSV usam uma representação cilíndrica com matiz como ângulo, mas definem o brilho de forma diferente. Em HSL, luminosidade de 50% é a cor pura; 0% é preto, 100% é branco. Em HSV, valor de 100% é a cor pura; 0% é preto. HSV não tem uma forma direta de chegar ao branco sem também reduzir a saturação. Designers e seletores de cor (Photoshop, Figma) tipicamente usam HSV, enquanto o CSS usa HSL nativamente.
Como encontro a classe Tailwind para uma cor HEX arbitrária?
O Tailwind CSS vem com uma paleta fixa de cerca de 220 classes de cor (22 matizes vezes 10 tons cada, mais preto, branco e transparente). Para encontrar a classe mais próxima de um valor HEX, você calcula a distância euclidiana em um espaço de cor perceptual (como CIELAB ou OKLCH) entre sua cor e cada amostra do Tailwind. O Localizador de Cor Tailwind no ToolDeck faz isso automaticamente e mostra a correspondência mais próxima junto com a diferença de cor para que você julgue se a aproximação é boa o suficiente.
É seguro colar cores de marca confidenciais em uma ferramenta online?
Depende da ferramenta. Qualquer ferramenta que envia sua entrada para um servidor expõe esses valores no tráfego de rede e nos logs do servidor. As ferramentas de cor do ToolDeck rodam inteiramente no seu navegador usando JavaScript no lado do cliente. Nenhuma requisição HTTP carrega seus dados de cor para nenhum backend. Você pode verificar isso abrindo a aba Rede do seu navegador enquanto usa a ferramenta. Para máxima cautela, você também pode usar as ferramentas offline após o carregamento inicial da página.