Ir para o conteúdo
OneKitly
Criar conta · Entrar

Inversor de cor

Inverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.

Ferramentas relacionadas

Todas as ferramentas: Cores e CSS →
Verificador de contraste de corRácio de contraste WCAG entre texto e fundo, com aprovado/reprovado AA/AAA e uma pré-visualização.Gerador de esquemas de corDerive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.Seletor de cor de imagemCarregue uma imagem, clique para amostrar qualquer píxel e extraia uma paleta dominante, com HEX e RGB de cada amostra.Gerador de paletas de corCrie uma paleta baseada em harmonia que pode bloquear e regenerar, estilo Coolors, com copiar todos os HEX.Conversor de coresConverte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.Compressor de CSSMinifique CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos.Laboratório de CSS FlexboxExperimente flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.Gerador de CSS GridConstrua um layout CSS Grid visualmente — colunas, linhas, espaços e alinhamento — com pré-visualização ao vivo e CSS para copiar.

Inversor de cor funciona diretamente nesta página — gratuito, instantâneo e sem instalar nada. Encontra-la em Cores e CSS, com Verificador de contraste de cor e Gerador de esquemas de cor para os casos vizinhos.

Como usar

  1. Abra a ferramenta — sem registo nem instalação.
  2. Introduza os seus dados ou ajuste as opções disponíveis.
  3. Obtenha o seu resultado ao instante e copie-o ou descarregue-o.

Perguntas frequentes

Para que serve Inversor de cor?

Inverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK 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 Inversor de cor 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?

Gerador de esquemas de cor é o mais próximo a seguir a este: Derive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.

Que mais vale a pena ter aberto ao lado?

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

De onde vêm os dados?

As conversões entre HEX, RGB e HSL são exatas. O contraste segue a fórmula de luminância relativa da WCAG 2; o CMYK depende do dispositivo, pelo que um valor no ecrã é uma aproximação do que será impresso.

Para saber mais

Todos os guias →
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.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.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.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.
Inversor de cor — OneKitly