Conversor de Cores
Um Conversor de Cores transforma valores de cor entre os formatos HEX, RGB, HSL, HSV e CMYK em tempo real, com um seletor HSL interativo usando controles deslizantes de gradiente, e um gerador de paletas de harmonia mostrando esquemas complementares, análogos, triádicos, complementares divididos e tetrádicos em uma roda de cores SVG — gratuito, sem cadastro.
#FF5733255, 87, 5110.6°, 100%, 60%10.6°, 80%, 100%0%, 65.9%, 80%, 0%#FF5733rgb(255, 87, 51)hsl(10.6, 100%, 60%)Tem uma sugestão?
Solicite uma nova ferramenta ou sugira melhorias — junte-se à nossa comunidade no Slack!
O que é um Conversor de Cores?
Um Conversor de Cores traduz valores de cor entre diferentes formatos usados em web design, design gráfico e impressão. Códigos HEX (#FF5733) são o padrão em HTML/CSS, RGB (255, 87, 51) define cores de tela como intensidade de vermelho, verde e azul de 0-255, HSL (11°, 100%, 60%) descreve cores por ângulo de matiz, saturação e luminosidade para ajustes intuitivos, HSV (11°, 80%, 100%) é usado em ferramentas de design como Photoshop, e CMYK (0%, 66%, 80%, 0%) é o padrão para impressão. Este conversor lida com todos os cinco formatos com visualização instantânea, um seletor de cores interativo com controles deslizantes de gradiente e um gerador de paletas de harmonia que cria esquemas de cores complementares, análogos, triádicos, complementares divididos e tetrádicos visualizados em uma roda de cores SVG.
Como Usar Este Conversor de Cores
- Selecione o formato de entrada (HEX, RGB ou HSL) e insira o valor da cor para ver conversões instantâneas para todos os outros formatos
- Use a aba Seletor de Cores com controles deslizantes de matiz, saturação e luminosidade para selecionar visualmente qualquer cor
- Mude para a aba Paleta e insira uma cor HEX base para gerar paletas de harmonia
- Escolha um tipo de harmonia (complementar, análogo, triádico, complementar dividido ou tetrádico) para ver o esquema de cores na roda de cores
- Clique no botão copiar ao lado de qualquer valor ou use Copiar Todos para copiar o resultado completo para sua área de transferência
Perguntas Frequentes
Qual é a diferença entre os formatos de cor HEX e RGB?
HEX e RGB representam a mesma informação em formatos diferentes. HEX usa uma string hexadecimal de 6 dígitos (#RRGGBB) onde cada par representa valores de vermelho, verde e azul de 00 a FF. RGB usa valores decimais de 0 a 255. Por exemplo, #FF5733 é equivalente a rgb(255, 87, 51). HEX é compacto e comumente usado em CSS, enquanto RGB é mais legível para humanos.
Quando devo usar HSL em vez de RGB?
HSL (Matiz, Saturação, Luminosidade) é mais intuitivo para trabalho de design porque ajustar o matiz gira pelas cores, saturação controla a vibração e luminosidade controla o brilho. Para criar um tom mais escuro de qualquer cor, simplesmente reduza a luminosidade. Para criar uma versão pastel, reduza a saturação e aumente a luminosidade. Isso é muito mais difícil de fazer intuitivamente com valores RGB.
O que é CMYK e por que é diferente de RGB?
CMYK (Ciano, Magenta, Amarelo, Preto/Key) é usado para design de impressão, enquanto RGB é para telas. RGB é aditivo (baseado em luz: combinar todas as cores produz branco), enquanto CMYK é subtrativo (baseado em tinta: combinar todas as cores produz preto). As cores podem parecer diferentes quando convertidas entre os dois porque as telas exibem uma gama de cores mais ampla do que as impressoras podem reproduzir.
Como funcionam as paletas de harmonia de cores?
As harmonias de cores são baseadas em posições na roda de cores (círculo de matiz HSL). Cores complementares estão a 180° de distância, cores análogas estão a 30° de distância, cores triádicas estão a 120° de distância, complementar dividido usa deslocamentos de 150° e 210°, e tetrádico usa quatro cores a 90° de distância. Esses relacionamentos criam esquemas de cores visualmente equilibrados e esteticamente agradáveis usados em design, branding e trabalho de UI.
Ferramentas Relacionadas
Calculadora de Código de Cores de Resistores
Decodifique as faixas de cores de resistores para encontrar valores de resistência
Experimente →Calculadora de Vida Útil de Bateria
Estime quanto tempo sua bateria vai durar com base na capacidade e consumo de corrente
Experimente →Calculadora de Resistor para LED
Calcule o resistor correto para qualquer circuito de LED
Experimente →