WebFaz Cores

Conversor de cores, paletas e contraste

As cores e imagens são processadas no navegador; nada é enviado. Saiba mais

Conversor de cores online: HEX, RGB, HSL e OKLCH

Escolha uma cor e veja todos os formatos na hora. Gere escalas de tons e harmonias, extraia paletas de imagens, teste o contraste (WCAG e APCA) e simule daltonismo — tudo no navegador.

HEXRGBHSLCMYKOKLCHDisplay-P3

Cor selecionada

Azul royal
Aceita HEX, rgb(), hsl(), hsv(), cmyk(), oklch(), oklab() e nomes CSS.
55.8%
0.202
265°
100%

Formatos de cor

Conversão automática
HEX
#3867E8
RGB
rgb(56, 103, 232)
RGBA
rgba(56, 103, 232, 1)
HSL
hsl(224, 79%, 56%)
HSV / HSB
hsv(224, 76%, 91%)
CMYK · aproximação, sem perfil de impressão
cmyk(76%, 56%, 0%, 9%)
OKLCH · CSS moderno
oklch(55.8% 0.202 265.2)
OKLab
oklab(55.8% -0.017 -0.202)
Display-P3 · telas de gamut amplo
color(display-p3 0.264 0.399 0.878)

Escala de tons (50–950)

Gerada em OKLCH: a luminosidade cai de forma uniforme, sem os tons “lavados” ou sujos que o HSL produz. Seu #3867E8 fica no passo mais próximo.

#F3F7FFPreto 19.5
#E4EDFFPreto 17.9
#CADBFFPreto 15.1
#A8C4FFPreto 12.0
#7DA5FFPreto 8.7
#5283FFPreto 6.0
#3867E8Branco 4.9
#2149C1Branco 7.5
#12339FBranco 10.5
#061D7CBranco 14.3
#020659Branco 17.9
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        azul-royal: {
        50: '#f3f7ff',
        100: '#e4edff',
        200: '#cadbff',
        300: '#a8c4ff',
        400: '#7da5ff',
        500: '#5283ff',
        600: '#3867e8',
        700: '#2149c1',
        800: '#12339f',
        900: '#061d7c',
        950: '#020659',
        },
      },
    },
  },
}

Harmonia de cores

#3867E8
#926D00

Calculada girando o matiz em OKLCH, então as cores têm a mesma luminosidade percebida. Clique em uma para trabalhar com ela.

Contraste e legibilidade

Texto de exemplo grandeEste é um parágrafo de exemplo para você avaliar a leitura com este par de cores.
4.91:1WCAG 2.x
AA texto — aprovado AAA texto — reprovado AA grande — aprovado AAA grande — aprovado Interface (3:1) — aprovado

APCA Lc 73 — Texto de conteúdo grande ou em negrito

O ajuste muda só a luminosidade (em OKLCH), preservando o matiz da cor selecionada.

Simulador de daltonismo

Simulando a cor atual e sua tétrade. Monte uma paleta (2+ cores) para simular a sua. Se duas cores ficam parecidas numa linha, não use só a cor para diferenciá-las.

Visão normalComo a maioria enxerga
ProtanopiaSem cones de vermelho (~1% dos homens)
DeuteranopiaSem cones de verde (~1% dos homens)
TritanopiaSem cones de azul (raro)
AcromatopsiaSó tons de cinza (muito raro)

Simulação aproximada (modelo de Machado et al., 2009, severidade total). Serve de guia, não substitui testar com pessoas.

Cores de uma imagem

Arraste, clique para escolher ou cole (Ctrl+V)Dica: Win+Shift+S tira um print e Ctrl+V cola aqui. Nada é enviado.

Envie uma foto, logo ou print: o app encontra as cores dominantes (agrupadas em OKLab, por semelhança visual) e deixa você pegar a cor de qualquer pixel.

Gradiente CSS

De#3867E8
135°
background: linear-gradient(135deg, #3867E8, #A855F7);
background: linear-gradient(in oklch 135deg, #3867E8, #A855F7);

Minha paleta

Use “Na paleta” na cor selecionada (ou “Tudo na paleta” numa imagem) para juntar cores aqui. Depois copie o CSS, salve ou compartilhe por link.

Histórico de cores

As cores que você copiar aparecem aqui (ficam só neste navegador).

Escolha e converta

Use o seletor, o conta-gotas, os controles de luminosidade, croma e matiz — ou cole qualquer cor (HEX, rgb(), hsl(), oklch()). Todos os formatos atualizam juntos, com um clique para copiar.

Monte a paleta

Gere uma escala de 50 a 950 pronta para Tailwind, harmonias que mantêm a luminosidade e paletas a partir de fotos. Junte as cores, salve neste navegador ou compartilhe por link.

Teste a acessibilidade

Confira o contraste entre texto e fundo (AA e AAA, mais APCA), ajuste a cor até passar e veja como a paleta aparece para quem tem daltonismo.

Como converter e combinar cores online com o WebFaz Cores?

O WebFaz Cores é um conversor de cores grátis que roda no seu navegador: as cores e imagens que você usa não são enviadas a nenhum servidor. O histórico e as paletas salvas ficam apenas neste aparelho.

Formatos. Além de HEX, RGB, HSL, HSV e CMYK, o app mostra OKLCH, OKLab e Display-P3, os formatos do CSS moderno. O CMYK é uma aproximação matemática simples: para gráfica, confirme com o perfil de cor (ICC) usado na impressão.

Por que OKLCH? No OKLCH, mudar a luminosidade não muda a “cor” que o olho percebe, e girar o matiz mantém o brilho parecido. Por isso as escalas e harmonias daqui ficam mais uniformes que as feitas em HSL. O aviso de gamut aparece quando uma cor só existe em telas de gamut amplo (Display-P3): nesse caso, mostramos a mais próxima que cabe no sRGB.

Contraste. O WCAG 2.x calcula a razão entre as luminâncias: 4,5:1 é o mínimo AA para texto comum, 7:1 para AAA, e 3:1 para texto grande e elementos de interface. O APCA, proposto para o WCAG 3, considera a polaridade (texto claro em fundo escuro ou o inverso) e estima melhor a leitura. Hoje, o WCAG 2.x continua sendo o critério usado em conformidade legal.

Escala e exportação. A escala 50–950 pode ser copiada como configuração do Tailwind (v3 ou v4), variáveis CSS, SCSS ou JSON. O seu tom original fica no passo de luminosidade mais próximo.

Cores de uma imagem. Arraste uma foto, logo ou print: o app agrupa os pixels por semelhança visual e mostra as cores dominantes. Clique na imagem para pegar a cor de um ponto específico. Em navegadores com suporte (Chrome e Edge), o botão “Conta-gotas” pega a cor de qualquer lugar da tela.

Daltonismo. O simulador usa o modelo de Machado et al. (2009) para protanopia, deuteranopia, tritanopia e acromatopsia. É uma aproximação para orientar o design: se duas cores se confundem em alguma linha, não dependa só da cor para diferenciá-las.

Sobre Cores

Converte uma cor entre HEX, RGB, HSL, CMYK e OKLCH, gera escalas de tons, harmonias e paletas a partir de imagens, testa o contraste de texto e fundo (WCAG e APCA) e simula daltonismo, tudo no navegador. Serve para quem desenha interfaces, escreve CSS, monta identidade visual ou confere acessibilidade.

O que este conversor de cores faz

Além de converter, o WebFaz Cores ajuda a montar e validar uma paleta. Os recursos que mais chamam atenção:

  • OKLCH e gamut

    Controle luminosidade, croma e matiz, com aviso quando a cor só existe em telas de gamut amplo (Display-P3).

  • Escala 50–950

    Gera os tons e exporta para Tailwind (v3 e v4), variáveis CSS, SCSS ou JSON.

  • Contraste WCAG e APCA

    Veja AA e AAA e ajuste a cor automaticamente até passar.

  • Simulador de daltonismo

    Protanopia, deuteranopia, tritanopia e acromatopsia aplicadas à sua paleta.

  • Cores de uma imagem

    Extrai as cores dominantes de uma foto, logo ou print e pega a cor de qualquer pixel.

  • Escolher na tela e mini janela

    No Chrome e no Edge, pegue a cor de qualquer app e deixe uma janela flutuante com o resultado.

  • Paletas e link

    Monte, salve neste navegador e compartilhe uma paleta por link, sem cadastro.

Como usar

  1. Escolha a cor com o seletor, o conta-gotas da tela ou colando qualquer formato (HEX, rgb(), hsl(), oklch()).
  2. Copie o formato que precisar, ou gere a escala de tons e a harmonia a partir da cor.
  3. Teste o contraste com a cor do fundo e use “Ajustar” se não passar.
  4. Junte as cores numa paleta, salve neste navegador ou compartilhe por link.

Limites e cuidados

  • O CMYK é uma aproximação matemática, sem perfil de cor (ICC): para gráfica, confirme na prova de cor.
  • O conta-gotas da tela e a mini janela funcionam no Chrome, Edge e Opera, no computador. Nos demais navegadores, cole um print com Ctrl+V na seção de imagem.
  • O simulador de daltonismo é uma aproximação: serve de guia e não substitui testar com pessoas.

A ferramenta em uma imagem

Os pontos de clique estão numerados. Toque na imagem para vê-la em tamanho original. As demais telas, passo a passo, estão no guia “Como funciona”.

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.

Ver o guia completo: situações reais de uso, dicas e limites →

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

Perguntas frequentes

Minhas cores e imagens são enviadas a algum servidor?
Não. Tudo é calculado no navegador; histórico e paletas ficam só neste aparelho.
O que é OKLCH e por que usar?
É um formato do CSS moderno em que mudar a luminosidade ou o matiz não distorce o resto da cor. As escalas e harmonias feitas nele ficam mais uniformes que em HSL.
Qual contraste devo atingir?
Para texto comum, o WCAG AA pede 4,5:1 (AAA, 7:1). Para texto grande e elementos de interface, 3:1.
Dá para pegar a cor de outro programa aberto?
Sim, no Chrome, Edge e Opera: use “Escolher na tela”. Em outros navegadores, tire um print (Win+Shift+S) e cole com Ctrl+V na seção de imagem.