Cores: como funciona

Guia prático com exemplos de uso

Como converter cores (HEX, RGB, HSL, OKLCH), montar uma paleta e testar o contraste online

Pegar a cor de um site ou de uma imagem, convertê-la para o formato que o código pede, gerar os tons, combinar com outras cores e conferir se o texto fica legível: este guia mostra cada passo. Tudo no navegador, sem cadastro e sem instalar programa.

Guia escrito por Marcelo Amantino · atualizado em 13 de outubro de 2026 · quem somos

Abrir Cores

Onde seus dados são processados

Esta ferramenta roda inteiramente no seu navegador: seus arquivos e dados não são enviados a nenhum servidor do WebFaz.

As cores são calculadas no seu navegador. Nenhuma cor nem imagem é enviada ao WebFaz. O histórico de cores e as paletas salvas ficam guardados só neste navegador, e limpar os dados do navegador os apaga. Para guardar uma paleta fora dele, copie o CSS ou use o link da paleta.

Veja a lista completa na página de Privacidade & LGPD.

Situações reais de uso

Converter uma cor para o formato que você precisa

Situação: Você tem um HEX do manual da marca e precisa do valor em RGB, HSL ou OKLCH para o código.

  1. Cole a cor no campo “Digite ou cole uma cor”. Aceita HEX, rgb(), hsl(), oklch() e nomes como “coral”.
  2. Veja todos os formatos no cartão ao lado e clique em “Copiar” no que precisar.
  3. Para ajustar, use os controles de luminosidade, croma e matiz, ou o de transparência para obter RGBA e HEX com alfa.
WebFaz Cores com a cor #3867E8 selecionada: o cartão de pré-visualização, o campo para digitar ou colar uma cor, os controles de luminosidade, croma, matiz e transparência e, ao lado, todos os formatos (HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH, OKLab e Display-P3) com botão de copiar.
Converter: cole uma cor e copie o formato que precisar.
  1. Ponto 1: Cole ou digite a cor em qualquer formato: HEX, rgb(), hsl(), hsv(), cmyk(), oklch(), oklab() ou um nome como “coral”.
  2. Ponto 2: Ajuste a luminosidade, o croma e o matiz em OKLCH. A transparência gera RGBA e HEX com alfa.
  3. Ponto 3: Todos os formatos são atualizados juntos. Clique em “Copiar” no que o seu código pedir.
  4. Ponto 4: Copiar HEX copia direto a cor atual e a guarda no histórico.

Resultado: A mesma cor em todos os formatos, copiada com um clique.

Pegar a cor de qualquer lugar da tela ou de uma imagem

Situação: A cor está em outro programa, num site de cliente ou numa foto.

  1. No Chrome, Edge ou Opera, clique em “Escolher na tela”, aponte com a lupa e clique na cor desejada. A mini janela mostra o resultado por cima dos outros apps.
  2. Em outros navegadores, tire um print (no Windows, Win+Shift+S) e cole com Ctrl+V na seção “Cores de uma imagem”.
  3. Na imagem, clique em qualquer ponto para pegar aquela cor, ou use as cores dominantes que o app extrai sozinho.
Cartão Cor selecionada do WebFaz Cores com os botões Copiar HEX, Na paleta, Escolher na tela, Mini janela e Aleatória abaixo do campo de cor.
Escolher na tela: pegue a cor de qualquer programa aberto.
  1. Ponto 1: No Chrome, Edge ou Opera, “Escolher na tela” abre a lupa do navegador: clique em qualquer cor visível, até em outro programa.
  2. Ponto 2: A mini janela flutua por cima dos outros apps e mostra a cor escolhida com HEX, RGB, HSL e OKLCH para copiar.
  3. Ponto 3: Na paleta guarda a cor para montar um conjunto.
Seção Cores de uma imagem do WebFaz Cores com uma paisagem de pôr do sol carregada, o controle da quantidade de cores, as seis cores dominantes extraídas com seus códigos HEX e os botões Copiar HEX, Tudo na paleta e Trocar imagem.
Cores de uma imagem: as cores dominantes e a cor de qualquer ponto.
  1. Ponto 1: Clique em qualquer ponto da imagem para pegar a cor exata daquele pixel. A imagem não sai do seu navegador.
  2. Ponto 2: Escolha de 3 a 10 cores dominantes.
  3. Ponto 3: As cores aparecem em ordem de presença na imagem. Clique numa para trabalhar com ela.
  4. Ponto 4: Tudo na paleta junta as cores extraídas na sua paleta. Para um print, use Win+Shift+S e cole com Ctrl+V.

Resultado: A cor exata de um pixel, ou uma paleta tirada da imagem inteira.

Gerar a escala de tons e a paleta para o projeto

Situação: Você tem a cor principal e precisa dos tons claros e escuros para botões, fundos e bordas.

  1. Selecione a cor e abra a “Escala de tons (50–950)”. Sua cor fica no passo de luminosidade mais próximo.
  2. Escolha o formato de exportação (Tailwind v3 ou v4, variáveis CSS, SCSS ou JSON) e clique em “Copiar código”.
  3. Em “Harmonia de cores”, escolha complementar, análoga, tríade ou outra, e clique nas cores que quiser juntar.
  4. Use “Na paleta” para reunir as cores e depois copie como CSS, salve neste navegador ou envie o link da paleta.
Seção Escala de tons do WebFaz Cores com onze tons de azul de 50 a 950, cada um com o código HEX e o contraste do melhor texto, as abas de exportação (Tailwind v3 e v4, CSS variables, SCSS e JSON) e o código gerado.
Escala de tons: do 50 ao 950, pronta para colar no projeto.
  1. Ponto 1: Onze tons de luminosidade uniforme. A sua cor fica no passo mais próximo, e o texto sugerido (branco ou preto) vem com o contraste.
  2. Ponto 2: Escolha o formato: Tailwind (v3 ou v4), variáveis CSS, SCSS ou JSON.
  3. Ponto 3: O código é gerado com o nome aproximado da cor. Copie e cole no projeto.
  4. Ponto 4: Copiar código leva a escala inteira para a área de transferência.
Cartão Harmonia de cores do WebFaz Cores com as abas Complementar, Análoga, Tríade, Tétrade, Complementar dividida e Monocromática, a tríade selecionada com três cores e seus códigos HEX.
Harmonia: combinações calculadas em OKLCH a partir da sua cor.
  1. Ponto 1: Escolha o tipo: complementar, análoga, tríade, tétrade, complementar dividida ou monocromática.
  2. Ponto 2: Clique numa cor para trabalhar com ela. As cores mantêm a mesma luminosidade percebida.
  3. Ponto 3: Copiar leva os códigos HEX da harmonia.
Seção Minha paleta do WebFaz Cores com quatro cores reunidas, os botões Copiar HEX, Copiar CSS, Copiar JSON, Link da paleta e Limpar, o botão Paletas salvas e o histórico de cores copiadas.
Minha paleta: reúna, salve e compartilhe por link.
  1. Ponto 1: As cores da paleta (até 24). Clique numa para usá-la ou no X para tirá-la.
  2. Ponto 2: Copie a paleta como HEX, como variáveis CSS ou como JSON.
  3. Ponto 3: O link leva a paleta inteira na própria URL, sem cadastro e sem servidor.
  4. Ponto 4: Salve paletas com nome neste navegador (até 40) e abra quando quiser.
  5. Ponto 5: O histórico guarda as últimas cores que você copiou.

Resultado: Uma escala pronta para colar no projeto e uma paleta salva ou compartilhável.

Conferir contraste e daltonismo

Situação: Você quer ter certeza de que o texto é legível e de que a paleta não depende só da cor para se entender.

  1. Em “Contraste e legibilidade”, informe a cor do fundo e diga se a cor selecionada é o texto ou o fundo.
  2. Veja a razão do WCAG (AA e AAA) e o valor APCA. Se não passar, clique em “Ajustar até AA” ou “Ajustar até AAA”.
  3. No “Simulador de daltonismo”, compare as linhas: se duas cores ficam parecidas em alguma, acrescente outro sinal além da cor (ícone, texto ou forma).
Cartão Contraste e legibilidade do WebFaz Cores com um texto laranja sobre fundo branco, a razão de contraste WCAG, os selos AA e AAA reprovados, o valor APCA e os botões Ajustar até AA e Ajustar até AAA.
Contraste: veja AA, AAA e APCA e ajuste até passar.
  1. Ponto 1: Informe a outra cor do par e diga, nos botões ao lado, se a cor selecionada é o texto ou o fundo.
  2. Ponto 2: A razão do WCAG 2.x: 4,5:1 para texto comum (AA), 7:1 para AAA e 3:1 para texto grande e elementos de interface.
  3. Ponto 3: Cada selo mostra se o par passa ou não em cada nível.
  4. Ponto 4: O APCA considera a polaridade e indica para que tamanho de texto o par serve.
  5. Ponto 5: Ajustar muda só a luminosidade, preservando o matiz, até o par passar no nível escolhido.
Simulador de daltonismo do WebFaz Cores com cinco linhas de cores: visão normal, protanopia, deuteranopia, tritanopia e acromatopsia, cada uma mostrando como as mesmas cores aparecem.
Daltonismo: compare como a paleta aparece para cada tipo de visão.
  1. Ponto 1: A primeira linha é a visão normal, usada como referência.
  2. Ponto 2: Se duas cores ficam parecidas numa linha, não dependa só da cor: acrescente ícone, texto ou forma.
  3. Ponto 3: A acromatopsia mostra só tons de cinza, o que também ajuda a checar o contraste de luminosidade.

Resultado: Um par de cores aprovado no contraste e uma paleta testada para quem tem daltonismo.

Dicas para um resultado melhor

  • Prefira OKLCH para criar variações: a luminosidade muda sem distorcer a cor, ao contrário do HSL.
  • Para texto comum, mire em 4,5:1 (AA); para botões e ícones, 3:1.
  • Se a cor passar de gamut, o app avisa e mostra a mais próxima que cabe no sRGB.
  • Copie o CSS ou o link da paleta: as paletas salvas ficam só neste navegador.

Limites e quando esta não é a melhor opção

  • O CMYK é uma aproximação sem perfil ICC; para gráfica, confirme com a prova de cor.
  • O conta-gotas da tela e a mini janela exigem Chrome, Edge ou Opera no computador.
  • O simulador de daltonismo é uma aproximação, não substitui testes com pessoas.
  • A paleta guarda até 24 cores e o app salva até 40 paletas neste navegador.

Perguntas frequentes

Minhas cores e imagens são enviadas a algum servidor?
Não. Tudo é processado no navegador.
Qual a diferença entre HSL e OKLCH?
No OKLCH, a luminosidade e o matiz são percebidos de forma uniforme, então escalas e harmonias ficam mais equilibradas. É também o formato que acessa as cores de telas modernas (Display-P3).
Como pego a cor de outro programa?
Com “Escolher na tela” no Chrome, Edge ou Opera. Nos outros navegadores, tire um print e cole com Ctrl+V na seção de imagem.
O WCAG e o APCA dão o mesmo resultado?
Não. O WCAG 2.x é o critério usado em conformidade hoje; o APCA considera a polaridade (texto claro ou escuro) e estima melhor a leitura, mas ainda é uma proposta.

Ferramentas relacionadas