Conversor de Codigo de Cor

Converta codigos de cores em lote entre formatos HEX, RGB, HSL. Cole multiplas cores e obtenha todas as conversoes de uma vez.

Principais recursos

Conversão de cores em lote
Suporte a HEX, RGB, HSL, RGBA e HSLA
Copiar resultados individuais ou todos
Pré-visualização da cor para cada entrada

Guide

Cores em sistemas digitais são representadas por códigos numéricos. Diferentes contextos exigem diferentes formatos de código de cor. Desenvolvedores web usam códigos hex e funções de cor CSS. Designers gráficos trabalham com CMYK para impressão e RGB para tela. Designers de interface referenciam HSL para ajustes intuitivos de cor. Entender esses formatos, como eles se relacionam entre si e quando usar cada um é essencial para qualquer pessoa que trabalhe com cor digital. Este guia cobre os principais formatos de código de cor, a matemática de conversão e aplicações práticas em design e desenvolvimento. RGB (Vermelho, Verde, Azul) é o modelo de cor fundacional para telas. Cada pixel no seu monitor, telefone ou tablet produz cor misturando luz vermelha, verde e azul em diferentes intensidades. Cada canal varia de 0 (nenhuma luz) a 255 (intensidade máxima). RGB(255, 0, 0) é vermelho puro. RGB(0, 255, 0) é verde puro. RGB(0, 0, 255) é azul puro. RGB(255, 255, 255) é branco (todos os canais no máximo). RGB(0, 0, 0) é preto (nenhuma luz). RGB(128, 128, 128) é um cinza médio (partes iguais de cada canal em meia intensidade). O modelo RGB é chamado aditivo porque combinar todas as cores em intensidade total produz branco, o que corresponde a como a luz funciona fisicamente. Códigos de cor hexadecimais são o formato de cor mais comum na web. Um código hex é apenas um valor RGB escrito em base 16. O código hex #FF0000 é RGB(255, 0, 0), que é vermelho. Os dois primeiros caracteres (FF) representam o canal vermelho, os próximos dois (00) representam o verde e os últimos dois (00) representam o azul. FF em hexadecimal equivale a 255 em decimal. 00 equivale a 0. 80 equivale a 128. Converter entre hex e RGB é uma conversão de base: divida o código hex em três pares e converta cada par de base 16 para base 10. Códigos hex abreviados usam três caracteres em vez de seis. #F00 é equivalente a #FF0000. Cada caractere é duplicado: #F00 torna-se #FF0000, #39F torna-se #3399FF, #000 torna-se #000000. Essa abreviação funciona apenas quando cada par consiste em dois caracteres idênticos. #3A7F2B não pode ser abreviado porque nenhum par tem dígitos idênticos. Use a abreviação em código para brevidade quando disponível, mas esteja ciente de que algumas ferramentas e sistemas de design sempre produzem a forma completa de seis caracteres. Códigos hex de oito dígitos adicionam um canal alfa (transparência). #FF000080 é vermelho a 50% de opacidade. Os últimos dois dígitos (80, que é 128 em decimal, aproximadamente 50% de 255) definem o valor alfa. #FF0000FF é vermelho totalmente opaco (idêntico a #FF0000). #FF000000 é vermelho totalmente transparente (invisível). Hex de oito dígitos é suportado em CSS moderno e todos os principais navegadores. Note que alguns formatos (como desenvolvimento Android) colocam o canal alfa primeiro (#80FF0000), então verifique a convenção da sua plataforma. HSL (Matiz, Saturação, Luminosidade) representa cor de uma maneira que corresponde a como os humanos pensam sobre cor. Matiz é o ângulo de cor em uma roda de cores: 0 graus é vermelho, 120 graus é verde, 240 graus é azul e 360 graus volta ao vermelho. Saturação é a intensidade da cor de 0% (cinza) a 100% (totalmente vívida). Luminosidade é o brilho de 0% (preto) a 100% (branco), com 50% sendo a cor normal. HSL(0, 100%, 50%) é vermelho puro. HSL(120, 100%, 50%) é verde puro. HSL(60, 100%, 50%) é amarelo puro, a meio caminho entre vermelho e verde na roda de matiz. A vantagem prática do HSL sobre o RGB é a manipulação intuitiva de cor. Para tornar uma cor mais clara, aumente o valor de luminosidade. Para torná-la mais suave, diminua a saturação. Para mudar a cor (de vermelho em direção a laranja, por exemplo), ajuste o ângulo de matiz. No RGB, alcançar esses mesmos ajustes exige mudar múltiplos valores de canal simultaneamente, tornando mais difícil prever o resultado. Designers construindo paletas de cores costumam trabalham em HSL porque podem criar variações harmoniosas ajustando sistematicamente um parâmetro de cada vez. HSV (Matiz, Saturação, Valor) está intimamente relacionado ao HSL, mas define brilho diferentemente. No HSV, valor representa o brilho máximo da cor. Em V=100%, a cor é tão brilhante quanto possível. Em V=0%, a cor é preta independentemente do matiz e saturação. HSV é o modelo de cor nativo em muitas ferramentas de design, incluindo o seletor de cor do Adobe Photoshop. A diferença entre HSL e HSV é sutil, mas importa: HSL(0, 100%, 100%) é branco, enquanto HSV(0, 100%, 100%) é vermelho puro. HSV é mais intuitivo para pintores e designers pensando em tingir com branco versus sombrear com preto. HSL é mais simétrico e costumamente preferido em CSS. HWB (Matiz, Brancura, Negritude) é uma função de cor CSS mais nova que oferece outro modelo intuitivo. O matiz é o mesmo do HSL e HSV. Brancura define quanto branco é misturado (0% a 100%). Negritude define quanto preto é misturado (0% a 100%). HWB(0, 0%, 0%) é vermelho puro. HWB(0, 100%, 0%) é branco. HWB(0, 0%, 100%) é preto. HWB(0, 50%, 0%) é um rosa claro (vermelho misturado com 50% de branco). Muitos designers acham o HWB o modelo mais intuitivo porque ele espelha o conceito físico de misturar tinta com branco ou preto. CSS suporta hwb() em todos os navegadores modernos. CMYK (Ciano, Magenta, Amarelo, Preto/Key) é o modelo de cor usado em impressão. Enquanto telas adicionam luz (mistura aditiva de cor), impressoras depositam tinta que absorve luz (mistura subtrativa de cor). Tinta ciano absorve luz vermelha. Magenta absorve verde. Amarelo absorve azul. O canal key (preto) existe porque misturar tintas CMY teoricamente produz preto, mas na prática produz um marrom escuro turvo. Adicionar uma tinta preta dedicada produz tons escuros mais limpos e economiza tinta colorida. Valores CMYK variam de 0% a 100% para cada canal. Converter entre RGB e CMYK não é uma fórmula matemática simples. A conversão teórica (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, depois extraindo K como o mínimo de C, M, Y) oferece um ponto de partida, mas as cores reais de impressão dependem da tinta, papel, impressora e perfil de cor ICC. Fluxos de trabalho de impressão profissionais usam sistemas de gerenciamento de cor com perfis calibrados para garantir reprodução precisa. O conversor WebRecast realiza a conversão matemática, que é adequada para aproximações, referências rápidas e trabalho de cor não crítico. Para trabalhos de impressão de produção, sempre use um fluxo de trabalho gerenciado por cor com perfis calibrados. Funções de cor CSS expandiram-se significativamente nos últimos anos. Os formatos tradicionais são hex (#FF0000), rgb(255, 0, 0) e hsl(0, 100%, 50%). CSS moderno também suporta a função hwb() (Matiz, Brancura, Negritude), a função lab() (espaço de cor CIE LAB para cores perceptualmente uniformes), a função lch() (CIE LCH, a forma cilíndrica de LAB) e a função oklch() (uma versão corrigida de LCH que produz resultados mais previsíveis). Esses espaços de cor mais novos abordam limitações no RGB e HSL, particularmente em torno de uniformidade perceptual, onde duas cores com a mesma luminosidade HSL podem parecer bastante diferentes em brilho ao olho humano. OKLCH merece atenção especial porque está rapidamente tornando-se o espaço de cor recomendado para design web. OKLCH significa OK Lightness Chroma Hue e produz resultados perceptualmente uniformes. Isso significa que uma luminosidade de 70% parece igualmente brilhante em todos os matizes, ao contrário do HSL onde amarelo a 50% de luminosidade parece muito mais brilhante do que azul a 50% de luminosidade. Para criar paletas de cores acessíveis, gerar estados de hover de botão consistentes e construir sistemas de tokens de design, OKLCH produz melhores resultados do que HSL. A sintaxe é oklch(70% 0.15 250) onde 70% é luminosidade, 0.15 é croma (intensidade de cor) e 250 é o ângulo de matiz. Cores CSS nomeadas incluem 148 nomes predefinidos como red, blue, coral, darkslategray e papayawhip. Esses nomes mapeiam para valores hex específicos (coral é #FF7F50, papayawhip é #FFEFD5). Cores nomeadas são convenientes para prototipagem e legíveis em código, mas limitam você a uma paleta fixa. A maioria do CSS de produção usa códigos hex ou funções HSL para controle preciso. Os nomes das cores têm origens históricas: alguns vêm das cores do sistema de janelas X11 dos anos 1980, e é por isso que há peculiaridades como darkgray sendo mais claro que gray. Transparência alfa (opacidade) está disponível em todos os formatos de cor CSS modernos. rgba(255, 0, 0, 0.5) é vermelho a 50% de opacidade. hsla(0, 100%, 50%, 0.5) é a mesma cor. Em CSS moderno (Nível 4), você também pode escrever rgb(255 0 0 / 50%) usando a sintaxe separada por espaços com uma barra antes do valor alfa. O canal alfa varia de 0 (totalmente transparente) a 1 (totalmente opaco) em funções CSS, ou 0 a 255 em hex de 8 dígitos. A diferença entre transparência alfa em uma cor e a propriedade opacity do CSS é importante: opacity afeta todo o elemento e seus filhos, enquanto alfa de cor afeta apenas aquele valor de cor específico. Contraste de cor é uma consideração crítica para acessibilidade. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) exigem proporções mínimas de contraste entre texto e cores de fundo. O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. A proporção de contraste é calculada a partir da luminância relativa de duas cores usando a fórmula (L1 + 0,05) / (L2 + 0,05), onde L1 é a cor mais clara. A luminância relativa usa uma fórmula ponderada que considera a percepção humana: L = 0,2126R + 0,7152G + 0,0722B (após correção de gamma). O verde contribui mais para o brilho percebido, e é por isso que texto verde em branco precisa de valores RGB mais altos do que texto vermelho para alcançar o mesmo contraste. Daltonismo afeta aproximadamente 8% dos homens e 0,5% das mulheres. O tipo mais comum é daltonismo vermelho-verde (deuteranopia e protanopia), onde vermelhos e verdes aparecem semelhantes. Tritanopia (daltonismo azul-amarelo) é raro. Acromatopsia (daltonismo completo) é extremamente raro. Ao selecionar cores para interfaces, gráficos ou visualizações de dados, evite depender apenas da cor para transmitir informações. Use cor em combinação com formas, padrões, rótulos ou posição. Testar sua paleta de cores com um simulador de daltonismo ajuda a identificar combinações problemáticas. As cores azul e laranja são distinguíveis por quase todos os tipos de daltonismo. Construir uma paleta de cores para um site ou aplicativo tipicamente começa com uma cor primária de marca. A partir dessa base, você deriva uma paleta completa de tons, matizes e cores complementares. Em HSL, criar tons significa diminuir a luminosidade mantendo matiz e saturação constantes. Criar matizes significa aumentar a luminosidade. Criar uma cor complementar significa adicionar 180 graus ao matiz. Cores análogas estão dentro de 30 graus do matiz base. Cores triádicas estão 120 graus afastadas. Cores complementares divididas estão 150 e 210 graus da base. Essas relações de teoria das cores são fáceis de calcular em HSL e trabalhosas em RGB ou hex. Tokens de design e propriedades personalizadas CSS (variáveis) são a maneira moderna de gerenciar cores em um código. Defina suas cores uma vez como propriedades personalizadas CSS: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Referencie essas variáveis por todas as suas folhas de estilo. Quando você precisa mudar a cor primária, atualize um valor. Sistemas de design como Material Design e Tailwind CSS organizam cores em escalas (50, 100, 200 até 900) representando variações de luminosidade de cada matiz. Modo escuro exige uma abordagem diferente de cor do que simplesmente inverter tudo. No modo escuro, fundos são escuros (não preto puro, que causa muito contraste e cansaço visual) e texto é claro (não branco puro pelo mesmo motivo). Superfícies em diferentes níveis de elevação usam tons de fundo ligeiramente mais claros. Cores de marca costumam precisam de saturação reduzida e luminosidade aumentada no modo escuro para manter a legibilidade sem parecerem duras em fundos escuros. Um sistema de cor bem projetado usando propriedades personalizadas CSS pode alternar entre paletas claras e escuras mudando valores de variáveis no nível raiz. Espaços de cor além do sRGB estão se tornando importantes para telas modernas. O espaço de cor sRGB, usado por valores hex e RGB padrão, cobre apenas cerca de 35% das cores visíveis. Display P3, usado por dispositivos Apple e muitos monitores modernos, cobre cerca de 45%. Rec. 2020, usado em televisão HDR, cobre cerca de 75%. As novas funções CSS color-mix(), color() e oklch() podem acessar esses gamuts mais amplos. Uma cor especificada como color(display-p3 1 0 0) produz um vermelho mais vívido do que #FF0000 em telas que suportam P3. Conforme telas de gamut amplo tornam-se padrão, entender espaços de cor além do sRGB torna-se cada vez mais importante para entregar experiências visuais vibrantes. Converter cores programaticamente em JavaScript usa matemática direta. Para converter hex em RGB: parseInt(hex.substring(1,3), 16) fornece o canal vermelho, e similarmente para verde e azul. Para converter RGB em HSL: normalize R, G, B para a faixa 0-1, calcule os valores máximo e mínimo, derive luminosidade como (max+min)/2, saturação do delta entre máximo e mínimo e matiz de qual canal é o máximo. Essas fórmulas são bem documentadas e implementadas em todas as bibliotecas de manipulação de cor (chroma.js, color, tinycolor2 em JavaScript, colour em Python e palette em Rust). Gradientes usam múltiplos códigos de cor. Um gradiente linear CSS transita entre cores: background: linear-gradient(to right, #FF0000, #0000FF) cria um gradiente de vermelho a azul. Gradientes em RGB podem produzir cores intermediárias lamacentas porque a linha reta entre duas cores no espaço RGB pode passar por regiões não saturadas. Gradientes em HSL ou oklch costumam produzem transições mais vívidas porque seguem a roda de cores. Interpolação de gradiente CSS moderno com "in oklch" produz transições perceptualmente suaves: background: linear-gradient(in oklch, #FF0000, #0000FF). Isso é uma melhoria notável para gradientes entre cores complementares. O conversor de cores WebRecast aceita entrada em qualquer formato suportado e mostra instantaneamente os valores equivalentes em todos os outros formatos. Insira um código hex e veja os valores RGB, HSL, HSV e CMYK. Insira um valor HSL e obtenha os equivalentes hex e RGB. Isso elimina matemática de conversão manual e reduz erros ao traduzir entre ferramentas de design (que podem mostrar HSV) e CSS (que usa hex, RGB ou HSL). O conversor também exibe uma pré-visualização visual da cor para que você possa verificar se ela corresponde à sua intenção. Cor em visualização de dados exige atenção especial. Gráficos, gráficos e mapas devem usar cores que sejam distinguíveis umas das outras, significativas para o visualizador e acessíveis a pessoas com deficiências de visão de cor. Escalas de cor sequenciais (claro a escuro de um matiz) funcionam para dados contínuos como temperatura ou densidade populacional. Escalas de cor divergentes (dois matizes encontrando-se em um ponto médio neutro) funcionam para dados com um ponto central significativo, como lucro/prejuízo ou desvio da média. Escalas de cor categóricas (matizes distintos) funcionam para dados nominais como categorias de produto. Ferramentas como ColorBrewer fornecem paletas apoiadas por pesquisa otimizadas para diferentes tipos de dados e requisitos de acessibilidade. Gerenciamento de cor entre dispositivos é um desafio contínuo. O mesmo código hex pode parecer diferente em telas diferentes devido a variações em tecnologia de display, calibração, brilho e iluminação ambiente. sRGB é o espaço de cor padrão para a web e a maioria das telas é calibrada para aproximá-lo. Designers profissionais calibram seus monitores usando colorímetros (dispositivos de hardware que medem a saída da tela) e perfis ICC. Para desenvolvimento web onde você não pode controlar a tela do usuário, projete com margens de contraste suficientes para que pequenas diferenças de renderização de cor não afetem a usabilidade ou legibilidade. Extração de cor de imagens é útil para criar paletas que correspondam a fotografias, ativos de marca ou imagens de inspiração. O processo envolve amostrar cores dominantes usando algoritmos como agrupamento k-means, corte mediano ou quantização octree. Esses algoritmos agrupam pixels semelhantes e identificam as cores mais representativas. Ferramentas como Adobe Color, Coolors e vários pacotes npm (color-thief, vibrant.js) automatizam esse processo. Extrair 5 a 8 cores dominantes de uma imagem de destaque e usá-las como cores de destaque garante consistência visual entre imagens e elementos de interface. Psicologia das cores, embora não seja uma ciência exata, tem alguns efeitos documentados na percepção. Vermelho aumenta urgência percebida e é comumente usado para anúncios de venda e estados de erro. Azul transmite confiança e profissionalismo, e é por isso que instituições financeiras e plataformas de redes sociais o favorecem. Verde sinaliza sucesso, segurança e temas ambientais. Laranja está associado a ação e é comumente usado para botões de chamada à ação. Amarelo chama atenção e funciona para avisos. Essas associações são culturalmente influenciadas: branco representa luto em algumas culturas do leste asiático, enquanto vermelho significa sorte e prosperidade na cultura chinesa. Considere o contexto cultural do seu público-alvo ao escolher esquemas de cor. Dicas práticas para trabalhar com códigos de cor: sempre inclua o símbolo hash (#) ao escrever códigos hex em CSS, pois é sintaxe exigida. Use dígitos hex minúsculos para consistência (#ff0000 em vez de #FF0000), que também é a convenção usada pela maioria dos minificadores e formatadores CSS. Prefira HSL no seu CSS quando precisar criar variações de cor programaticamente. Use hex de 8 dígitos ou rgba/hsla para transparência em vez da propriedade opacity do CSS, que afeta todo o elemento incluindo filhos. Armazene suas cores de marca como tokens de design e referencie-as consistentemente por todo o projeto em vez de codificar valores de cor em componentes individuais. Ao comunicar cores com uma equipe de design, inclua tanto o código hex quanto a amostra visual para evitar ambiguidade por diferenças de calibração de tela.

Perguntas frequentes

Como isso difere de um conversor de cores comum?

Esta ferramenta foi projetada para desenvolvedores que precisam converter várias cores de uma vez, com formato de saída amigável ao código.

Quais formatos de cor são suportados?

Os formatos HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA e HSLA são todos suportados.