título: "Conversor de cores: Converta HEX, RGB, HSL, HWB e CMYK da maneira certa e quot; slug: ferramenta de guia conversor de cores: categoria conversor de cores: tipo de cor: cluster
Conversor de cores: Converta HEX, RGB, HSL, HWB e CMYK da maneira certa
A primeira vez que uma cor me mordeu foi numa tiragem Eu tinha construído uma página de destino para um dos meus produtos WordPress, assinado na marca azul no navegador, e depois enviado o mesmo & quot; azul" para uma gráfica para um lote de autocolantes O que voltou foi uma marinha plana, ligeiramente acinzentada, que não se parecia em nada com o ecrã Ninguém tinha convertido a cor do ecrã RGB em CMYK, por isso a impressora adivinhou, e o palpite estava errado Foi nesse dia que parei de tratar uma cor como uma única cadeia e comecei a tratá-la como um valor que tem de ser falado em várias línguas de uma só vez.
É exatamente para isso que serve um conversor de cores Você dá uma cor em uma sintaxe e ele devolve todas as outras sintaxes, então o azul em seu CSS, o azul em seu arquivo de design e o azul que sua impressora recebe são todos comprovadamente da mesma cor. Eu construí o conversor de cores em Toolz.dev porque EU estava cansado de colar códigos hexadecimais em três sites diferentes para obter RGB, HSL e CMYK separadamente.
tl;dr: Um conversor de cores pega uma cor e a reexpressa em HEX, RGB, HSL, HWB e CMYK de uma só vez, além do nome de cor CSS mais próximo Use RGB e HEX para telas, HSL ou HWB quando quiser cutucar uma cor manualmente e CMYK para impressão O conversor Toolz.dev é executado inteiramente em seu navegador, mantém o canal alfa intacto e nunca carrega o que você cola.
O que é um conversor de cores?
Um conversor de cores analisa uma cor escrita em qualquer sintaxe CSS comum e calcula seu equivalente nas outras Quais sintaxes existem, e exatamente como cada uma se converte, é definida por Módulo de cores CSS nível 4. A matemática não é complicada, mas fazê-la à mão é tedioso e propenso a erros Convertendo #4466EE para RGB significa dividir os seis dígitos hexadecimais em três pares e ler cada par como um número base 16: 44 tem 68 anos, 66 é 102 e EE é 238, dando rgb(68, 102, 238). Ir para o outro lado significa dividir cada canal em uma cadeia hexadecimal de dois dígitos e juntá-los Chegar ao HSL significa normalizar os canais, encontrar o mínimo e o máximo e calcular a matiz, a saturação e a leveza daqueles Você não quer fazer isso na cabeça às 2 da manhã.
O valor de um conversor não é apenas salvar aritmética É garantir consistência Quando uma ferramenta produz todos os formatos a partir de uma única cor analisada, não há chance de que o RGB que você copiou e o HSL que você copiou descrevam cores ligeiramente diferentes porque você arredondou de forma diferente entre uma fonte, uma verdade, cada formato.
Por que existem formatos de cores?
Cada formato de cor sobrevive porque é genuinamente bom em um trabalho.
RGB é como as telas funcionam Uma tela emite luz vermelha, verde e azul, e misturar essas três em diferentes intensidades produz todas as cores que você vê Isso faz do RGB a língua nativa do navegador: qualquer sintaxe que você escreva em CSS, o mecanismo de renderização resolve-o para RGB antes que acenda um pixel.
HEX é RGB abreviado. #4466EE é o mesmo que rgb(68, 102, 238), apenas embalado em uma corda compacta que é fácil de colar em uma folha de estilo ou uma ferramenta de design É popular porque é curto e inequívoco, não porque é mais capaz.
HSL descreve uma cor por matiz, saturação e leveza É o formato que EU alcancei quando estou ajustando manualmente uma UI Para tornar um botão mais escuro ao pairar, EU solto a leveza alguns pontos e deixo matiz e saturação sozinhos Tentar fazer isso em RGB bruto significa mudar todos os três canais por quantidades desiguais e esperar que a matiz não se desloque.
HWB, definido na especificação CSS Color Module Level 4 (Módulo de Cores CSS Nível 4)https://www.w3.org/TR/css-color-4/), descreve a mesma tonalidade por quanto branco e quanto preto são misturados Ele mapeia de forma limpa como as pessoas realmente pensam sobre tons e tonalidades: adicione branco para clarear, adicione preto para escurecer É mais recente, então EU usá-lo principalmente quando a legibilidade do código importa mais do que o alcance do navegador.
CMYK é o modelo de impressão As impressoras estabelecem tinta ciano, magenta, amarela e preta em papel branco, e cada tinta subtrai a luz em vez de adicioná-la É por isso que uma cor de tela vívida pode parecer mais opaca no papel: as faixas de cores que os dois modelos podem produzir, chamadas gamuts, são diferentes Um conversor dá a aproximação CMYK, mas não pode inventar tinta que não existe.
Como faço para converter HEX para RGB e vice-versa?
A conversão mais comum, por uma ampla margem, é HEX para RGB e RGB para HEX. Aqui está o método manual para que você possa verificar a sanidade de qualquer ferramenta, incluindo a minha.
Para converter HEX em RGB, divida os seis dígitos em três pares e leia cada um como um número hexadecimal de 0 a 255. abreviação de três dígitos como #46E expande duplicando cada dígito para #4466EE primeiro. Para converter RGB em HEX, pegue cada valor de canal, converta-o em uma string hexadecimal de dois dígitos com zero à esquerda, se necessário, e junte-o atrás de um hash.
Em vez de fazer isso repetidamente, cole o valor no conversor cor e leia todos os formatos de uma só vez Se você também precisa escolher uma cor visualmente e vê-lo atualizar ao vivo, o selecionador cores é o melhor ponto de partida e as duas ferramentas compartilham o mesmo núcleo de conversão para que seus números concordem.
Quando devo usar CMYK em vez de RGB?
Use CMYK somente quando a saída é tinta em papel Cartões de visita, adesivos, embalagens e qualquer trabalho de impressão comercial esperam valores CMYK, e enviar RGB para uma impressora significa que a impressora ou seu software converte para você, muitas vezes com resultados que você não assinou esse foi meu erro de adesivo em uma frase.
Use RGB, e sua abreviação HEX, para qualquer coisa que será exibida em uma tela: sites, aplicativos, gráficos sociais, vídeo Se um projeto abrange os dois mundos, mantenha RGB ou HEX como sua fonte de verdade e gere a aproximação CMYK com um conversor no momento em que você entrega para imprimir, para que você possa observar os valores CMYK e sinalizar qualquer cor que mudará mal antes que custe uma tiragem.
Como os formatos de cores se comparam?
| formato | melhor para | Suporte alfa | exemplo |
|---|---|---|---|
| bruxa | CSS compacto, transferência de design | Formulário de 8 dígitos apenas | #4466EE |
| RGB/RGBA | Telas, cor programática | Sim (RGBA) | rgb(68, 102, 238) |
| HSL/HSLA | Matiz e leveza de ajuste manual | Sim (HSLA) | hsl(228, 83%, 60%) |
| HWB | Tons e tons legíveis | Sim (com barra alfa) | hwb(228 27% 7%) |
| cmyk | Imprimir, tinta sobre papel | não | cmyk(71%, 57%, 0%, 7%) |
Vale a pena ter a tabela em mente porque ela é mapeada perfeitamente em um fluxo de trabalho: projete em HEX ou escolha visualmente, sintonize HSL ou HWB, envie para telas em RGB ou HEX e converta para CMYK apenas no limite de impressão.
Como a transparência viaja entre formatos?
Alfa é onde muitas conversões silenciosamente dão errado O canal alfa controla a opacidade, de 0 (totalmente transparente) a 1 (totalmente opaco).RGBA e HSLA carregam-no como um quarto valor, e um HEX de 8 dígitos carrega-o como um quarto par: #4466EECC isso é azul com cerca de 80% de opacidade, porque CC é 204 de 255. Plain HEX e cmyk() não tem nenhum canal alfa.
O conversor Toolz.dev preserva alfa através de todos os formatos que o suportam Se você colar rgba(0, 0, 0, 0.5) você recebe #00000080 na linha HEXA e hsla(0, 0%, 0%, 0.5) na linha HSLA, todos descrevendo o mesmo preto meio transparente Quando você copia o HEX simples ou a linha CMYK em vez disso, você está copiando a cor totalmente opaca, que é uma escolha deliberada, não um bug: esses formatos não podem expressar opacidade, então eles mostram a cor como se fosse sólida Quando a transparência importa, copie de uma linha com reconhecimento alfa.
Posso converter um nome de cor CSS?
Sim, e funciona em ambas as direcções Digite uma palavra-chave como tomato, rebeccapurple, ou slategray e o conversor resolve-o para HEX, RGB, HSL, HWB e CMYK O conjunto completo de 148 cores nomeadas vem da especificação CSS Color Module Level 4, de modo que os valores correspondem exatamente ao que um navegador resolve.
Ir para o outro lado é onde ele fica genuinamente útil Cole uma cor numérica e o conversor relata o nome CSS exato se um corresponder, e sempre mostra a cor nomeada mais próxima por distância RGB quando não corresponde Essa correspondência mais próxima é útil para nomear variáveis e escrever documentos de design legíveis: #663399 volta como rebeccapurple, e algo próximo a ele volta como & quot;mais próximo: rebeccapurple" então você sabe em que bairro você está.
Como isso se encaixa em um fluxo de trabalho de design real?
Veja como eu realmente uso a cor em um projeto e onde cada ferramenta se encaixa.
Começo escolhendo uma cor primária, geralmente visualmente com o selecionador cores. Assim que tiver minha marca azul, eu a passo pelo conversor cor para bloquear seus valores HEX, RGB, HSL e CMYK em um só lugar, e eu os colar no documento do sistema de design para que cada companheiro de equipe e cada fornecedor trabalhem com os mesmos números.
Então EU construo a paleta Tons de suporte vêm de leveza nudging em HSL, e EU verifico cada par de texto em fundo com o verificador do contraste da cor então a paleta é acessível antes de ser enviada, não depois de uma reclamação Quando preciso de um floreio de fundo, alimento duas dessas cores no gerador gradiente.
Finalmente, para espaçamento responsivo e tipografia em torno de toda essa cor, emparelho a paleta com a Gerador de braçadeira CSS assim, os tamanhos escalam tão suavemente quanto as cores são consistentes Cor e layout são duas metades do mesmo polimento.
Se você se preocupa com o destino de seus dados enquanto trabalha, vale a pena ler como essas ferramentas lidam com isso Tudo no conversor de cores funciona no lado do cliente, uma escolha de design sobre a qual escrevi no guia de privacidade de dados em ferramentas online, e fica ao lado do resto do meu kit diário no Kit de ferramentas para desenvolvedores web.
É preciso o suficiente para a produção?
Para o trabalho de tela, sim, sem qualificação. HEX, RGB, HSL e HWB são todas representações exatas da mesma cor sRGB, portanto, convertendo entre eles viagens de ida e volta de forma limpa: converta uma cor para HSL e vice-versa e você pousa no mesmo triplo RGB, dê ou pegue uma unidade de arredondamento em um canal Esse arredondamento é inerente à representação de uma cor contínua em canais inteiros, não uma falha em qualquer ferramenta.
Para CMYK, trate a saída como uma aproximação sólida e padrão, em vez de uma prova gerenciada por cores A cor verdadeira da impressão depende do papel específico, tintas e perfil ICC que sua impressora usa, que nenhuma ferramenta baseada em navegador pode saber O conversor usa a fórmula CMYK ingênua padrão, que é exatamente o que a maioria das ferramentas de design mostra por padrão e é um ponto de partida confiável Quando um trabalho é crítico para a cor, obtenha uma prova física da impressora antes da execução completa Essa é a lição que meus adesivos cinza-marinha me ensinaram, e é mais barato aprender com este parágrafo do que com uma caixa de adesivos errados.
E os espaços de cores mais recentes, como LAB e OKLCH?
Se você seguir o CSS de perto, você já viu lab(), lch(), oklab(), e oklch() aparecendo em folhas de estilo e ferramentas de design Estes vêm da especificação CSS Color Module Level 4 e eles resolvem um problema real: RGB, HSL e HWB estão todos ligados ao modelo de tela sRGB, então duas cores que parecem igualmente diferentes para o olho podem ser distâncias numéricas muito diferentes, e uma exibição de gama ampla pode mostrar cores que sRGB simplesmente não pode descrever Os espaços de cores OK são perceptualmente uniformes, o que os torna excelentes para gerar paletas uniformemente escalonadas e para interpolar gradientes que não enlameiam no meio.
Eu deliberadamente mantive este conversor focado nos formatos que você cola no CSS de produção diária e mão para impressoras: HEX, RGB, HSL, HWB e CMYK Esse é o conjunto que cobre a esmagadora maioria das tarefas reais, e cada uma delas mapeia de forma limpa para a mesma cor sRGB, então as conversões entre elas são exatas e reversíveis Os espaços de gama mais ampla envolvem decisões de mapeamento de gama que são fáceis de errar sutilmente, e misturá-las em um conversor simples trocaria clareza pela cobertura que a maioria das pessoas não precisa.
A regra prática que EU sigo: alcance o OKLCH quando você estiver gerando uma paleta ou um gradiente por algoritmos e você quiser etapas perceptivamente pares, e fique com HEX, RGB e HSL para o trabalho diário de escrever componentes Quando você fizer o design no OKLCH, converta as cores de âncora resultantes em HEX ou RGB com sua ferramenta de design antes da transferência, para que os valores em sua folha de estilo sejam os mesmos que este conversor e seus colegas de equipe podem ler.
Perguntas frequentes
Como faço para converter HEX para RGB?
Divida o código HEX de seis dígitos em três pares e leia cada um como um número hexadecimal de 0 a 255. In #4466EE, 44 tem 68 anos (vermelho), 66 é 102 (verde) e EE é 238 (azul), dando rgb(68, 102, 238). Cole o código HEX no conversor e o valor RGB aparecerá imediatamente ao lado de todos os outros formatos.
Como faço para converter RGB para HEX?
Converta cada um dos valores vermelho, verde e azul (0 a 255) em um número hexadecimal de dois dígitos e junte-se a eles após um hash. rgb(68, 102, 238) torna-se #4466EE. O conversor faz isso instantaneamente e também fornece o formulário HEXA de 8 dígitos quando um valor alfa está presente.
Qual é a diferença entre HSL e HWB?
HSL descreve uma cor por matiz, saturação e leveza, enquanto HWB descreve a mesma matiz por quanto branco e quanto preto são misturados nele HWB é muitas vezes mais intuitivo para tons e tonalidades: aumentar a brancura ilumina a cor e aumentar a negritude escurece-lo Ambos mapa para o exato mesmo valor RGB, para que você possa alternar entre eles livremente.
Quando devo usar CMYK em vez de RGB?
Use CMYK para impressão e RGB para telas CMYK é um modelo subtrativo baseado em tintas ciano, magenta, amarelo e preto, por isso é o que as impressoras comerciais esperam RGB é aditivo e descreve a luz emitida por displays Uma cor de tela tem uma aproximação CMYK, mas as duas gamas diferem, de modo que cores de tela vívidas podem parecer mais opacas na impressão.
O conversor suporta transparência?
Sim. Forneça um valor alfa através de rgba(), hsla(), ou um HEX de 8 dígitos e a opacidade é preservada em cada saída alfa-consciente Formatos sem um canal alfa, como HEX simples e cmyk(), mostrar a cor totalmente opaca, portanto verifique a saída RGBA ou HEXA quando a transparência importa.
Posso converter um nome de cor CSS?
Sim. Digite uma palavra-chave CSS como tomato, rebeccapurple, ou slategray e o conversor resolve para HEX, RGB, HSL, HWB e CMYK. Também funciona ao contrário: cole uma cor numérica e informa o nome CSS exato se corresponder, mais a cor nomeada mais próxima para referência.
O conversor de cores é gratuito e privado?
Sim. O conversor é totalmente gratuito, sem inscrição, sem limites e sem marcas d'água. Toda análise e conversão são executadas em seu navegador usando JavaScript do lado do cliente, para que as cores inseridas nunca saiam do seu dispositivo e a ferramenta continue funcionando offline assim que a página for carregada.
