Ir para o conteúdo
Allin

Conversor de cores

Converte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.

Este conversor de cores gratuito transforma qualquer cor entre HEX, RGB e HSL ao instante no navegador. Introduza um valor num formato e leia-o em todos os outros, pronto a colar em CSS, numa ferramenta de design ou no seu código. Ideal para respeitar cores de marca, criar paletas e ajustar tons sem adivinhar.

Como usar

  1. Introduza uma cor em HEX, RGB ou HSL.
  2. Leia os valores equivalentes nos outros formatos.
  3. Copie o formato que precisa para o seu projeto.

Perguntas frequentes

Como converto HEX para RGB?

Uma cor HEX como #4287f5 são três pares — vermelho (42), verde (87), azul (f5) — cada um lido como número de 0 a 255. Esta ferramenta faz a conversão ao instante.

O que é HSL?

HSL significa Matiz (Hue), Saturação e Luminosidade (Lightness). Costuma ser mais fácil que RGB para ajustar uma cor: aumente a luminosidade para clarear, baixe a saturação para suavizar, mude o matiz para trocar de cor.

Qual a diferença entre HEX e RGB?

Descrevem a mesma cor — HEX é uma notação compacta em base 16 (#ff0000) e RGB lista os canais em decimal (rgb(255,0,0)). Ambos funcionam em CSS.

Posso usar estes valores em CSS?

Sim. HEX, rgb() e hsl() são valores de cor CSS válidos — copie o que encaixar na sua folha de estilos ou design system.

O que é Conversor de cores?

Converte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.

Em que casos se usa na prática?

Levar uma cor de uma ferramenta de design para uma folha de estilos, construir uma paleta em torno de uma cor de marca e verificar se o texto será legível sobre ela.

Qual é o erro mais comum?

Avaliar o contraste a olho. Duas cores que parecem distintas num monitor luminoso podem falhar claramente o rácio de acessibilidade, e é esse rácio que uma auditoria vai medir.

Em que difere Conversor de cores de Verificador de contraste de cor?

Estão próximos mas respondem a perguntas diferentes: Verificador de contraste de cor é o que deves abrir quando se trata de rácio de contraste WCAG entre texto e fundo, com aprovado/reprovado AA/AAA e uma pré-visualização. Escolhe o que corresponde ao teu ponto de partida — ambos são gratuitos.

Existe uma ferramenta para o passo seguinte?

Inversor de cor é o mais próximo a seguir a este: Inverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.

Que mais vale a pena ter aberto ao lado?

Gerador de esquemas de cor e Seletor de cor de imagem — surgem na mesma tarefa com frequência suficiente para merecerem outro separador.

Para saber mais

Todos os guias
TutorialHEX vs RGB: como ler e converter coresHEX e RGB são duas notações para as mesmas cores. Eis como ler cada uma, converter entre elas e adicionar transparência.ExplicaçãoRácio de contraste: como a WCAG o calcula realmenteO rácio WCAG é (L1 + 0,05) ÷ (L2 + 0,05), e L é a luminância relativa, não o brilho. O verde carrega 71,52 % e o azul 7,22 %, razão pela qual o azul puro sobre branco passa com 8,59:1 enquanto o cinzento médio falha com 3,95:1. Eis o cálculo inteiro, corrido de ponta a ponta.ExplicaçãoGradientes, bandas e porque o meio parece turvoInterpolar em sRGB faz a média de números codificados em gama: o ponto médio de vermelho para verde é #808000 quando a resposta a meia-luz é #bcbc00 — menos 57,2 % de luz. As bandas são outro problema aritmético: 8 bits dão 256 degraus, e um gradiente escuro pode ter apenas 28. Eis ambos, calculados.ExplicaçãoOs esquemas de cor são geometria numa roda — e a roda está erradaComplementar, tríade, análogo e complementar dividido são apenas rotações: some 180°, 120°, 30° ou 150° a um matiz. A aritmética é trivial. O problema é que o círculo de matizes HSL não é percetualmente uniforme — o amarelo e o azul com a mesma luminosidade HSL diferem 12,85 vezes em luminância — por isso uma paleta gerada tem de ser verificada em contraste depois.GuiaO que um minificador pode remover e o que não pode tocarA minificação tem de preservar o significado, e o interessante são os espaços que carregam significado: o combinador descendente, os espaços dentro de calc(), o intervalo entre dois elementos em linha. Medido aqui em ficheiros reais, incluindo o que o brotli já lhe ia poupar.GuiaEmbelezar ou minificar: para que serve cada um e o que faz ao pesoQuatro folhas de estilo reais passadas pelo minificador, medidas em bruto e depois de gzip. Retirar todos os espaços poupou 48, 103, 104 e 147 bytes comprimidos; retirar os comentários, 57, 1 358, 2 420 e 1 042. E as cinco entradas que este minificador parte.