Gerador e Conversor de Cores
Gere paletas, converta entre HEX, RGB e HSL. Color picker visual para designers e desenvolvedores.
Paleta de Cores
Como Usar o Gerador e Conversor de Cores
Esta ferramenta foi criada para designers, desenvolvedores e qualquer pessoa que trabalhe com cores digitais. Ela permite escolher cores visualmente, converter entre formatos e gerar paletas harmonicas em segundos. Veja como aproveitar cada funcionalidade:
- Escolha uma cor base: use o seletor de cores (color picker) clicando no quadrado colorido a esquerda, ou digite diretamente o codigo HEX no campo de texto. A cor sera atualizada em tempo real.
- Copie o codigo no formato desejado: abaixo do seletor, voce vera a cor convertida automaticamente em tres formatos — HEX, RGB e HSL. Clique em "Copiar" ao lado de qualquer formato para copia-lo para a area de transferencia.
- Gere uma cor aleatoria: clique no botao "Cor Aleatoria" para descobrir cores inesperadas. Essa funcao e otima para encontrar inspiracao quando voce esta sem ideias.
- Visualize a cor em contexto: no painel a direita, a cor e exibida em uma area grande para visualizacao, alem de dois exemplos mostrando como texto branco e preto ficam sobre ela — essencial para verificar contraste e legibilidade.
- Crie paletas de cores: use o botao "Paleta Aleatoria" para gerar 6 cores aleatorias, ou clique em "Complementar" para gerar automaticamente uma paleta com a cor base, variacoes mais claras, mais escuras e a cor complementar.
- Selecione cores da paleta: clique em qualquer cor da paleta para defini-la como a cor principal e copiar seu codigo automaticamente.
Como Funciona: Formatos HEX, RGB e HSL
Toda cor digital e representada como uma combinacao de valores numericos. Existem varios sistemas para descrever essas cores, e cada um tem vantagens especificas dependendo do contexto de uso.
HEX (Hexadecimal)
O formato HEX e o mais popular na web. Ele usa 6 digitos hexadecimais (base 16, de 0 a F) precedidos pelo simbolo #. Os dois primeiros digitos representam vermelho, os dois do meio representam verde e os dois ultimos representam azul. Por exemplo, #FF0000 e vermelho puro, #00FF00 e verde puro e #0000FF e azul puro. O formato HEX e compacto e amplamente suportado em CSS, editores de imagem e ferramentas de design como Figma, Canva e Photoshop.
RGB (Red, Green, Blue)
O modelo RGB define cores pela intensidade de tres canais: vermelho (Red), verde (Green) e azul (Blue), cada um variando de 0 a 255. O valor rgb(255, 0, 0) e vermelho puro, rgb(255, 255, 255) e branco e rgb(0, 0, 0) e preto. O RGB e o modelo nativo de monitores e telas, pois cada pixel e formado fisicamente por sub-pixels vermelhos, verdes e azuis. No CSS moderno, voce tambem pode usar rgba() para adicionar transparencia (canal alfa).
HSL (Hue, Saturation, Lightness)
O HSL e considerado o formato mais intuitivo para humanos. Ele descreve cores com tres propriedades: matiz (Hue, de 0 a 360 graus no circulo cromatico), saturacao (de 0% a 100%, onde 0% e cinza e 100% e a cor pura) e luminosidade (de 0% a 100%, onde 0% e preto e 100% e branco). O HSL facilita ajustes: para clarear uma cor, basta aumentar a luminosidade; para desaturar, basta reduzir a saturacao. Isso o torna ideal para criar variacoes de uma mesma cor em sistemas de design.
A conversao entre esses formatos e puramente matematica — todos representam o mesmo espectro de cores. Esta ferramenta realiza as conversoes automaticamente em tempo real, sem necessidade de calculos manuais.
Perguntas Frequentes
Qual formato de cor devo usar no meu projeto web?
Para a maioria dos projetos web, o HEX e o formato mais utilizado por ser compacto e universalmente suportado. Porem, se voce precisa de transparencia, use rgba() ou hsla(). Se voce esta criando um sistema de design com variacoes de cores (tons claros e escuros da mesma cor), o HSL e mais pratico porque permite ajustar luminosidade e saturacao de forma intuitiva.
O que e uma cor complementar?
A cor complementar e aquela que esta no lado oposto do circulo cromatico. Ela cria o maximo contraste visual quando combinada com a cor original. Por exemplo, a complementar do azul e o laranja, a do vermelho e o ciano. Cores complementares sao muito usadas em design para criar destaque visual, call-to-actions e composicoes vibrantes.
Como escolher cores acessiveis para meu site?
A acessibilidade de cores esta ligada ao contraste entre texto e fundo. As diretrizes WCAG recomendam uma taxa de contraste minima de 4.5:1 para texto normal e 3:1 para texto grande. Use os exemplos de texto branco e preto desta ferramenta como referencia inicial. Como regra geral, evite texto claro sobre fundo claro ou texto escuro sobre fundo escuro. Cores com luminosidade (L no HSL) abaixo de 40% geralmente funcionam bem com texto branco.
Qual a diferenca entre RGB e CMYK?
RGB e um modelo de cores aditivo, usado em telas e monitores — misturando vermelho, verde e azul em intensidade maxima, voce obtem branco. CMYK (Ciano, Magenta, Amarelo e Preto) e um modelo subtrativo, usado em impressao — as tintas absorvem luz e a mistura de todas resulta em preto. Se voce esta projetando para telas, use RGB/HEX. Se e para impressao, o CMYK e necessario. Esta ferramenta trabalha com RGB, ideal para projetos digitais.
Como criar uma paleta de cores harmonica?
Existem varias estrategias baseadas no circulo cromatico: cores analogas (vizinhas no circulo), complementares (opostas), triadicas (3 cores equidistantes) e monocromaticas (variacoes de luminosidade da mesma cor). Use o botao "Complementar" desta ferramenta para gerar automaticamente uma paleta com variacoes da cor selecionada. Para projetos profissionais, escolha uma cor principal, uma secundaria e uma de destaque, mantendo o restante neutro.
Posso usar as cores geradas em ferramentas como Figma, Canva ou Photoshop?
Sim. Basta copiar o codigo HEX (por exemplo, #3B82F6) e colar diretamente no campo de cor de qualquer ferramenta de design. Todas as ferramentas profissionais aceitam codigos HEX. Algumas tambem aceitam RGB e HSL. O formato HEX e o mais universal e funciona em praticamente qualquer software.
Dicas Praticas para Trabalhar com Cores
- Regra 60-30-10: em design, use 60% de uma cor dominante (geralmente neutra), 30% de uma cor secundaria e 10% de uma cor de destaque. Isso cria hierarquia visual sem poluir o layout.
- Teste em modo escuro: se seu projeto suporta dark mode, verifique se as cores escolhidas funcionam bem com fundos escuros. Cores que ficam otimas em fundo branco podem perder contraste em fundo preto.
- Cuidado com cores vibrantes em excesso: cores muito saturadas (saturacao acima de 80% no HSL) cansam a vista quando usadas em grandes areas. Reserve-as para botoes, links e elementos de destaque.
- Considere daltonismo: cerca de 8% dos homens tem algum tipo de daltonismo. Evite depender apenas de vermelho e verde para transmitir informacao — combine cores com icones ou textos.
- Salve suas paletas: ao encontrar uma combinacao que funciona, copie os codigos HEX e guarde em um documento de referencia. Isso evita inconsistencias visuais ao longo do projeto.