Conversor de Cores e Paletas
Converta e visualize cores instantaneamente. Suporta vários formatos e opções avançadas para uso profissional.
Opções Avançadas
O nosso Conversor de Cores Gratuito ajuda designers, programadores, especialistas em marketing e criadores de conteúdo a converter cores de forma rápida e precisa. Quer esteja a trabalhar com HEX, RGB, HSL ou CMYK, esta ferramenta oferece pré-visualizações instantâneas e conversões exatas. Vários formatos de entrada são suportados, incluindo o modo em lote para grandes projetos.
Ao usar o Conversor de Cores, pode poupar tempo e reduzir erros nos cálculos manuais. A interface intuitiva, a pré-visualização ao vivo e as opções avançadas tornam-no ideal para fluxos de trabalho profissionais enquanto continua a ser totalmente gratuito e acessível a partir do browser.
Principais Funcionalidades
- Suporte universal para formatos de cores (HEX, RGB, HSL, CMYK, etc.)
- Modo em lote: converta múltiplas cores em simultâneo
- Apoia valores alfa/transparência
- Conversão de cor de modo instantâneo com pré-visualização ao vivo
- Gera códigos CSS consistentes para projetos web
Porquê Usar a Nossa Ferramenta?
Esta ferramenta trata a complexa matemática da conversão de cores por si. Não mais confusões ao converter do modo de impressão para ecrã (Web) - garanta que todos os elementos estão com a formatação otimizada nas mãos de um único design fluído. simular daltonismo e verificar contraste WCAG
FAQ — Conversor de Cores e Paletas
Frequently Asked Questions
Como usar o conversor de cores
-
Insira o valor da cor
Digite ou cole qualquer valor de cor — HEX (#3b82f6), RGB (59, 130, 246), HSL (217, 91%, 60%) ou CMYK. A ferramenta detecta automaticamente o formato. -
Veja todas as conversões instantaneamente
Todos os formatos equivalentes são atualizados em tempo real: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK e propriedade personalizada CSS. Copie qualquer valor com um único clique. -
Use o seletor de cores
Clique na amostra de cor ou use o seletor de cores nativo do navegador para escolher visualmente uma cor e obter todos os seus equivalentes de formato de uma só vez. -
Copie e utilize no seu projeto
Clique no botão Copiar de qualquer formato para enviá-lo para a sua área de transferência. Cole diretamente no CSS, Sass, configuração do Tailwind, Figma ou fluxos de trabalho de impressão.
Exemplos de conversões
A mesma cor azul expressa em todos os formatos suportados:
| Formato | Valor | Utilização |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, Figma |
| RGB | rgb(59, 130, 246) | CSS, API Canvas |
| RGBA | rgba(59, 130, 246, 1) | CSS com opacidade |
| HSL | hsl(217, 91%, 60%) | CSS, tokens de design |
| CMYK | C:76 M:47 Y:0 K:4 | Impressão / offset |
| HSV | 217°, 76%, 96% | Editores de imagem |
Casos de uso comuns
Design Web e UI
Converta as cores HEX da marca para HSL para propriedades personalizadas CSS e configuração Tailwind, garantindo temas consistentes nos modos claro e escuro.
Impressão e pré-impressão
Converta as cores RGB ou HEX da tela para CMYK para produção de impressão — evitando o erro comum de cores que ficam ótimas na tela, mas ficam sem brilho na impressão.
Diretrizes da marca
Documente uma paleta completa da marca em todos os formatos — HEX para digital, CMYK para impressão, referência Pantone — a partir de uma única fonte confiável.
Verificações de acessibilidade
Recupere valores exatos de cores para testar num verificador de contraste, garantindo que as combinações de texto e fundo atendam aos requisitos WCAG AA ou AAA.
Fluxos de trabalho do programador
Converta rapidamente as cores da ferramenta de design (Figma HEX) em variáveis CSS HSL para temas dinâmicos e manipulação programática de cores.
Como funciona
Todas as conversões são executadas instantaneamente no seu navegador, sem qualquer envolvimento do servidor.
A ferramenta analisa a sua entrada em valores RGB normalizados (0–255 por canal) e, em seguida, aplica fórmulas de conversão padrão a cada formato de destino.
HSL (matiz, saturação, luminosidade) é derivado do RGB encontrando o canal mínimo/máximo, calculando a luminosidade como sua média e, em seguida, calculando a saturação e o ângulo do matiz.
CMYK é calculado a partir de RGB através da fórmula: K = 1 - max(R,G,B); C = (1-R-K)/(1-K); etc. Note que RGB→CMYK depende do dispositivo — CMYK no ecrã é uma aproximação, não um perfil de impressão.
Para quem é esta ferramenta
Desenvolvedores Frontend
Converta tokens de design entre formatos CSS e verifique rapidamente os valores das cores durante o desenvolvimento.
Designers de UI/UX
Converta amostras do Figma ou Sketch para qualquer formato necessário para o seu sistema de design ou estrutura CSS.
Designers gráficos
Converta as cores da marca RGB para CMYK antes de enviar a arte final para impressão, evitando surpresas com alterações de cor.
Gerentes de marca
Mantenha uma paleta de cores única para a marca em todos os formatos — digitais e impressos — sem trocar de ferramentas.
Testadores de acessibilidade
Extraia valores de cor precisos para utilização em verificadores de contraste e auditorias de acessibilidade.
Dicas para trabalhar com cores
- Use HSL nas propriedades personalizadas CSS (--color-primary: hsl(217, 91%, 60%)) para que possa ajustar a luminosidade com calc() para os estados hover e desativado.
- Sempre solicite uma prova de impressão ao usar conversões CMYK de RGB — a correspondência de cores entre a tela e a impressão requer um perfil de cor do dispositivo.
- Use o seletor de cores do navegador para selecionar cores diretamente de capturas de tela ou recursos de design — sem necessidade de copiar valores manualmente.
- Após a conversão, teste as suas cores num verificador de contraste para confirmar se a sua paleta está em conformidade com a WCAG AA (4,5:1) para o corpo do texto.
- Armazene a paleta da sua marca em todos os formatos (HEX, RGB, CMYK) na documentação do seu sistema de design para eliminar conversões repetidas.
Por que a conversão precisa de cores é importante
- Valores de cor inconsistentes entre as equipas de design e desenvolvimento são uma das principais causas de inconsistência visual nos produtos comercializados.
- RGB e CMYK ocupam gamas diferentes — cores que parecem vibrantes no ecrã podem ficar opacas na impressão sem uma conversão adequada.
- O CSS HSL torna a criação de temas dinâmicos (modo claro/escuro, tonalidades) muito mais fácil do que o HEX — mas requer uma conversão precisa de HEX para HSL para começar.
- As auditorias de conformidade da marca exigem cores em vários formatos — um único conversor elimina erros manuais e poupa horas de idas e vindas.
Desempenho e privacidade
Todas as conversões de cores são executadas inteiramente no seu navegador usando JavaScript básico. Nenhum valor de cor, paleta ou dados de uso são enviados para qualquer servidor. A ferramenta responde em menos de 10 ms por conversão, funciona offline após a primeira visita e não requer conta ou registo.
Nota educativa: Explicação sobre espaços de cor
RGB (Aditivo)
RGB mistura luz vermelha, verde e azul. Todos os canais em 255 = branco; todos em 0 = preto. Usado por ecrãs, câmaras e navegadores da web.
HEX (abreviação da Web)
HEX é codificado em RGB como base 16. #3b82f6 = R:59, G:130, B:246. É idêntico ao RGB — apenas uma notação mais compacta para CSS e HTML.
HSL (Perceptual)
O HSL separa a matiz (ângulo da roda de cores 0–360°), a saturação (intensidade) e a luminosidade (brilho). Mais fácil de entender do que o RGB para designers.
CMYK (subtrativo)
CMYK mistura tintas ciano, magenta, amarela e preta (chave). Subtrai-se do papel branco. O RGB de ecrã tem uma gama mais ampla — algumas cores RGB brilhantes não podem ser reproduzidas em CMYK.
Resolução de problemas
Sabia que...
A notação de cores HEX foi introduzida no HTML em 1996 com a especificação HTML 3.2. Antes disso, os navegadores reconheciam apenas 16 cores nomeadas (como «vermelho» e «azul»). A paleta de cores completa da web expandiu-se para 140 cores nomeadas com CSS1, mas HEX continuou a ser o formato dominante — e ainda é, mais de 25 anos depois.
O único conversor de cores de que precisa
Seja você um programador a converter tokens Figma em CSS, um designer a fazer a ponte entre ecrã e impressão ou um testador de acessibilidade a verificar taxas de contraste — esta ferramenta gratuita converte instantaneamente entre todos os principais formatos de cor, sem chamadas ao servidor e sem armazenamento de dados. Insira a sua cor, copie o formato que precisa e volte a criar.