🧰 ToolPicoTodas as ferramentas →
🎨 Visual e desenvolvimento

Conversor de cor

Converte instantaneamente entre HEX, RGB, HSL, HSV/HSB e CMYK. Escolhe uma cor ou introduz um código — cada formato mantém-se sincronizado. Além disso, um verificador de contraste WCAG 2.1 e um gerador de paletas complementares/análogas/triádicas — tudo no teu navegador, grátis.

HEX · RGB · HSL · HSV · CMYK Alfa compatível WCAG 2.1 AA / AAA Atualizado: 26 jul. 2026
Cor selecionada
#7C3AED
—
HEX
Podes introduzir #RRGGBB, a forma curta #RGB, ou adicionar o alfa com #RRGGBBAA.
RGB
HSL
HSV / HSB
Alfa (opacidade)
100%
Todos os formatos — clica para copiar
Espaços de cor modernos — OKLCH · LAB · LCH
Saída de código para programadores — clica para copiar
Cores rápidas
Resposta rápida Para converter um código HEX (por exemplo #7C3AED) para RGB, converte cada bloco de dois carateres de base 16 para base 10: 7C=124, 3A=58, ED=237, obtendo rgb(124, 58, 237). A mesma cor em HSL é hsl(262, 83%, 58%). Escolhe uma cor acima e cada formato, o rácio de contraste e uma paleta são gerados automaticamente.
HEX
RGB
HSL
Luminância relativa (L)
🎨 Nota: todas as conversões usam os cálculos padrão do espaço de cor sRGB e funcionam inteiramente no teu navegador — nenhum dado é alguma vez enviado para um servidor. A cor que vês no ecrã pode variar consoante a calibração do monitor, o tipo de painel e as condições de iluminação. A saída CMYK é uma simples aproximação matemática. Os resultados são fornecidos apenas para fins informativos; para cores de impressão ou de marca exatas, usa o perfil de cor ICC correspondente, uma referência Pantone ou as diretrizes da tua marca.
🎨 Conversor de cor — ToolPico ↗

Verificador do rácio de contraste WCAG

Introduz uma cor de texto (primeiro plano) e uma cor de fundo para ver o rácio de contraste WCAG 2.1 e os resultados AA/AAA com uma pré-visualização em direto. Visa pelo menos 4,5:1 para o texto de tamanho normal, para continuar acessível.

—
rácio de contraste
Exemplo de título grande (24px)
O texto de corpo normal tem este aspeto. Por acessibilidade, esta linha deve continuar confortavelmente legível — WCAG AA exige pelo menos um contraste de 4,5:1.

Simulação de daltonismo

Como se perceciona a cor que escolheste acima segundo diferentes tipos de daltonismo? Consulta as simulações de protanopia, deuteranopia, tritanopia e acromatopsia (daltonismo total) para verificar rapidamente se o teu design continua distinguível para utilizadores daltónicos. Um complemento natural do verificador de contraste.

Compara «Normal» à esquerda com os restantes. Ao tocares numa cor, o seu código HEX é copiado. Esta simulação é uma transformação matricial aproximada do lado do cliente; uma avaliação clínica precisa requer um exame médico.

Gerador de paleta de cores

Paletas harmoniosas derivadas da cor que escolheste acima. Cada uma é gerada automaticamente a partir de uma relação da roda de cores (complementar, análoga, triádica, complementar dividida, tetrádica/quadrada) ou de um gradiente de luminosidade (monocromática). Toca numa cor para copiar o seu código HEX para a área de transferência.

Gerador de gradiente CSS

Cria um gradiente linear ou radial a partir da cor selecionada acima e de uma segunda cor à tua escolha. A pré-visualização e o código CSS atualizam-se em direto — copia com um clique.

135°
CSS

Escala de cor para sistemas de design (50–900)

Gera uma escala tonal 50–900 pronta a usar em tokens de design (Tailwind, Radix, Figma) a partir da cor selecionada acima. Copia um tom individual, todos de uma vez, ou exporta a escala completa em JSON.

🪜 Escala 50–900
O tom mantém-se fixo; a luminosidade percorre 9 paragens, do mais claro (50) ao mais escuro (900) — o mesmo padrão usado nas paletas do Tailwind CSS.

Extrair uma paleta de cores a partir de uma imagem

Carrega uma imagem e as suas cores dominantes são extraídas automaticamente. A imagem nunca sai do teu dispositivo — é processada inteiramente no teu navegador (Canvas) e nunca é enviada para nenhum servidor. Toca numa das cores extraídas para a enviar para o conversor.

JPG, PNG, WebP… serão extraídas as cores mais dominantes.

Como funcionam os códigos de cor, e como se convertem entre si?

Uma explicação completa dos modelos HEX, RGB, HSL e HSV, do cálculo de conversão e do contraste WCAG.

Um conversor de códigos de cor permite-te exprimir a mesma cor em notações diferentes (HEX, RGB, HSL, HSV/HSB, CMYK) e passar de uma para outra. Todos estes modelos descrevem o espaço de cor sRGB que os ecrãs usam — por isso um código HEX e o seu equivalente em RGB ou HSL descrevem exatamente a mesma cor, apenas escrita de forma diferente. Esta ferramenta realiza cada conversão com algoritmos padrão, sem qualquer biblioteca externa.

Como se converte um código de cor HEX para RGB?

Resposta rápidaUm código HEX escreve-se #RRGGBB; cada bloco de dois carateres representa um canal de cor em base 16 (hexadecimal). Para converter para base 10: #7C3AED → 7C=124, 3A=58, ED=237, ou seja rgb(124, 58, 237). A forma abreviada de três carateres (#RGB) expande-se repetindo cada carácter duas vezes: #F0A → #FF00AA.
  • RR — o canal vermelho, 00–FF (0–255).
  • GG — o canal verde, 00–FF (0–255).
  • BB — o canal azul, 00–FF (0–255).
  • AA (opcional) — num HEX de 8 dígitos, o último bloco é o canal alfa (opacidade).

O que são HSL e HSV? Em que se distinguem de RGB?

Resposta rápidaHSL (Tom-Saturação-Luminosidade) e HSV/HSB (Valor/Brilho) descrevem uma cor segundo eixos de tom, saturação e luminosidade/brilho que são intuitivos para os humanos. RGB trabalha com três canais de luz; HSL/HSV funcionam mais em torno da roda de cores. A diferença está no terceiro componente: em HSL, L=50% dá a cor pura; em HSV, V=100% dá a cor mais viva.

Na prática, quando queres pegar numa cor de marca e produzir tons mais claros e escuros dela, HSL é o modelo mais útil: mantém o tom (H) e a saturação (S) fixos e varia apenas a luminosidade (L). A paleta «Tons e matizes» desta página faz exatamente isso. Os seletores de cor dos programas de design costumam usar HSV, porque um controlo deslizante de «brilho» é visualmente mais fácil de entender.

Como se calcula o rácio de contraste WCAG?

Resposta rápidaPrimeiro calcula-se a luminância relativa de cada cor. Cada canal sRGB é dividido por 255 e linearizado: c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4. Depois L = 0,2126·R + 0,7152·G + 0,0722·B. O rácio de contraste é (L1 + 0,05) / (L2 + 0,05) — L1 a cor mais clara, L2 a mais escura. O resultado vai de 1:1 a 21:1.

Esta fórmula tem em conta que o olho humano é mais sensível ao verde e menos sensível ao azul (os coeficientes 0,7152 e 0,0722). Por isso mesmo um par aparentemente «claro» como amarelo sobre branco pode não passar as verificações de contraste. Usa a ferramenta de contraste acima para veres o rácio e os resultados AA/AAA em direto para quaisquer duas cores.

Objetivos para um contraste de cor acessível

Resposta rápidaTexto normal: AA ≥ 4,5:1, AAA ≥ 7:1. Texto grande (≈18pt, ou 14pt a negrito e maior): AA ≥ 3:1, AAA ≥ 4,5:1. Os componentes de interface e objetos gráficos costumam precisar de 3:1. Manter o teu texto acima destes limites significa que os utilizadores com baixa visão também podem ler o teu conteúdo confortavelmente.

Tabelas de referência

Equivalências HEX/RGB/HSL das cores básicas, limites de contraste WCAG, onde se usa tipicamente cada formato, e uma tabela de conversão de opacidade (alfa) → HEX.

Equivalências HEX, RGB e HSL das cores básicas (sRGB)
CorHEXRGBHSL
Preto#0000000, 0, 00, 0%, 0%
Branco#FFFFFF255, 255, 2550, 0%, 100%
Vermelho#FF0000255, 0, 00, 100%, 50%
Verde lima#00FF000, 255, 0120, 100%, 50%
Azul#0000FF0, 0, 255240, 100%, 50%
Amarelo#FFFF00255, 255, 060, 100%, 50%
Ciano#00FFFF0, 255, 255180, 100%, 50%
Magenta#FF00FF255, 0, 255300, 100%, 50%
Laranja#FFA500255, 165, 039, 100%, 50%
Violeta (esta ferramenta)#7C3AED124, 58, 237262, 83%, 58%
Cinzento#808080128, 128, 1280, 0%, 50%

Os valores HSL estão arredondados ao número inteiro mais próximo. Introduz qualquer HEX no conversor acima para ver o seu equivalente exato.

Limites mínimos do rácio de contraste WCAG 2.1
Tipo de conteúdoAA (mínimo)AAA (reforçado)
Texto normal (< 18pt / 14pt negrito)4,5:17:1
Texto grande (≥ 18pt ou 14pt negrito)3:14,5:1
Componente de interface / objeto gráfico3:1—
Elemento decorativo / desativadoNão exigidoNão exigido

18pt ≈ 24px, 14pt negrito ≈ 18,66px. O rácio de contraste pode atingir no máximo 21:1 (preto puro sobre branco puro).

Formatos de cor e casos de uso habituais
FormatoExemploOnde se usa
HEX#7C3AEDCSS, design, web — o mais habitual
HEX + alfa#7C3AED80Cor semitransparente (CSS, mobile)
RGBrgb(124, 58, 237)CSS, operações baseadas em canais
RGBArgba(124, 58, 237, .5)CSS que precisa de opacidade
HSLhsl(262, 83%, 50%)Ajuste de tom/luminosidade, geração de temas
HSV / HSBhsv(262, 76%, 93%)Seletores de cor de ferramentas de design
CMYKcmyk(48, 76, 0, 7)Impressão (conversão aproximada)
OKLCHoklch(54,1% 0,247 293)CSS moderno; vasta gama, luminosidade percetualmente coerente
LABlab(43,4% 64,8 -79,1)Independente do dispositivo; medição de diferença de cor (ΔE)
LCHlch(43,4% 102,2 309,3)A forma cilíndrica (tom/croma) de LAB
Percentagem de opacidade (alfa) → último bloco HEX de 8 dígitos
OpacidadeDecimal (0–1)HEX (00–FF)
100% (totalmente opaco)1,00FF
90%0,90E6
75%0,75BF
50% (semitransparente)0,5080
25%0,2540
10%0,101A
0% (totalmente transparente)0,0000

HEX alfa = a forma hexadecimal de round(opacidade × 255). Move o controlo de alfa acima e o HEX de 8 dígitos atualiza-se automaticamente.

Cores populares

Adicionar esta ferramenta ao teu site (código de incorporação)

Incorpora gratuitamente o conversor de cor no teu próprio site. Copia o código abaixo para o teu HTML — a ferramenta é apresentada numa vista simplificada e liga a esta página como fonte.

A ferramenta incorporada tem um design fixo; podes ajustar o valor de height conforme o teu site. Sem publicidade nem dados pessoais, funciona inteiramente no cliente.

Glossário de termos de cor

Definições breves dos termos essenciais dos códigos de cor e das verificações de acessibilidade.

HEXUma notação que escreve uma cor em base 16 no formato #RRGGBB. O formato mais habitual em web e design.
RGBDefine uma cor pela quantidade 0–255 de luz vermelha, verde e azul (um modelo aditivo).
HSLTom (0–360°), Saturação (%), Luminosidade (%). Útil para derivar temas e variantes tonais.
HSV / HSBTom, Saturação, Valor/Brilho. O modelo padrão por trás da maioria dos seletores de cor de ferramentas de design.
CMYKO modelo de impressão que trabalha com tinta Ciano, Magenta, Amarelo e Key (preto) (um modelo subtrativo).
Alfa (opacidade)A transparência de uma cor; 0 é totalmente transparente, 1 é totalmente opaco. Escreve-se em RGBA ou HEX de 8 dígitos.
TomO ângulo na roda de cores; 0° é vermelho, 120° é verde, 240° é azul.
SaturaçãoA intensidade de uma cor; 0% é uma escala de cinzentos, 100% é a forma mais vívida.
Luminância relativaO brilho percecionado de uma cor pelo olho; a base do cálculo do rácio de contraste.
Rácio de contrasteA diferença de luminância entre duas cores; obtém-se com (L1+0,05)/(L2+0,05), variando de 1:1 a 21:1.
WCAGWeb Content Accessibility Guidelines; a norma de acessibilidade web do W3C (níveis AA/AAA).
Cor complementarO tom diretamente oposto na roda de cores (H+180°); oferece o contraste mais forte.
Cores análogasTons vizinhos (H±30°); criam uma paleta harmoniosa e tranquila.
Paleta triádicaTrês tons distribuídos uniformemente na roda (H, H+120°, H+240°); vívida e equilibrada.
sRGBO espaço de cor por defeito dos ecrãs e da web; HEX/RGB/HSL descrevem todos este espaço.
OKLCHUm espaço de cor moderno e percetualmente uniforme: Luminosidade, Croma, Tom. Preferido em CSS pela sua vasta gama e luminosidade coerente.
LAB / LCHUm espaço de cor independente do dispositivo baseado em CIELAB; mede a diferença de cor (ΔE) de forma próxima da perceção humana. LCH é a sua forma cilíndrica (tom/croma).
DaltonismoDificuldade em distinguir cores; os tipos mais habituais são a protanopia e a deuteranopia (vermelho-verde) e a tritanopia (azul-amarelo).

Guias detalhados

As perguntas mais habituais sobre códigos de cor e acessibilidade, respondidas.

Como se constrói uma paleta completa a partir de uma cor de marca?

Introduz a tua cor principal no conversor acima. A paleta de tons e matizes mantém fixos o tom e a saturação e varia a luminosidade (L) de 50 a 900, dando-te uma escala de cores ideal para botões, contornos e camadas de fundo. Depois, a paleta análoga (H±30°) dá cores de destaque suaves, a paleta complementar (H+180°) dá uma cor de ação forte, e a paleta triádica dá uma combinação vívida de três cores.

Uma abordagem habitual em interfaces profissionais: uma cor de marca principal mais um gradiente de tons, um destaque complementar e uma escala de cinzentos neutros. Testa cada cor que escolheres como texto/fundo com a ferramenta de contraste e assegura-te de que passa o limite AA.

A minha cor de texto é suficientemente legível? Como saber?

Introduz a tua cor de texto como primeiro plano e a tua cor de fundo na secção de contraste WCAG acima. Se o rácio for inferior a 4,5:1 não atinges AA para o texto de tamanho normal — visa pelo menos isso. Para os títulos grandes (≈24px+), o limite desce para 3:1. Os distintivos da ferramenta assinalam cada limite cumprido/não cumprido, e a pré-visualização em direto abaixo mostra a legibilidade real.

Dica: para aumentar o contraste, clarear um pouco o fundo (ou baixar a luminosidade da cor em HSL) costuma dar um resultado mais limpo do que simplesmente escurecer o texto. O amarelo, o verde claro e os tons pastel costumam falhar sobre um fundo branco.

Para que serve o HEX de 8 dígitos (alfa), e como se lê?

#RRGGBBAA adiciona um canal de opacidade (alfa) a uma cor padrão, escrito em 8 dígitos hexadecimais. Os dois últimos carateres vão de 00 (totalmente transparente) a FF (totalmente opaco). Por exemplo #7C3AED80 é violeta com aproximadamente 50% de opacidade — o mesmo que rgba(124, 58, 237, .5).

A conversão de percentagem para HEX é round(opacidade × 255): 50% → 128 → 80, 75% → 191 → BF. Move o controlo de alfa acima e as saídas RGBA e HEX de 8 dígitos atualizam-se instantaneamente; a tabela de referência «Alfa → HEX» enumera os valores mais habituais.

Descobre todas as ferramentas do ToolPico →

Perguntas frequentes

Como se converte um código de cor HEX para RGB?
Um código HEX escreve-se #RRGGBB, e cada bloco de dois carateres representa um canal em base 16. Para converter para base 10, converte cada bloco: #7C3AED → 7C=124, 3A=58, ED=237, ou seja rgb(124, 58, 237). A forma abreviada de três carateres (#RGB) expande-se repetindo cada carácter duas vezes: #F0A → #FF00AA.
O que é HSL?
HSL é um modelo de cor composto por Tom (0–360°), Saturação (%) e Luminosidade (%). É mais intuitivo para os humanos do que RGB: manter o tom fixo enquanto a luminosidade muda produz facilmente versões mais claras ou escuras de uma cor. HSL e RGB descrevem a mesma cor sRGB e convertem-se exatamente entre si.
Como se calcula o rácio de contraste WCAG?
Calcula-se a luminância relativa de cada cor: cada canal sRGB é normalizado entre 0 e 1 e linearizado com c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4, e depois soma-se como L = 0,2126·R + 0,7152·G + 0,0722·B. O rácio de contraste obtém-se com (L1 + 0,05) / (L2 + 0,05) (L1 a mais clara, L2 a mais escura). O resultado vai de 1:1 a 21:1.
Como se constrói uma paleta de cores?
Os métodos mais habituais baseiam-se em relações da roda de cores: complementar (H+180°) oferece um contraste forte, análoga (H±30°) oferece transições harmoniosas, triádica (H, H+120°, H+240°) oferece um trio vívido. Os tons e matizes produzem-se mantendo o tom fixo e aumentando ou reduzindo a luminosidade (L). Esta ferramenta deriva automaticamente as quatro a partir da tua cor escolhida.
Qual é a diferença entre HSV e HSL?
Ambos usam Tom e Saturação; o terceiro componente difere. Em HSL, L=50% dá a cor pura, 100% dá branco, 0% dá preto. Em HSV/HSB, V=100% dá a cor mais viva, 0% dá preto; chegar ao branco requer também baixar a saturação. As ferramentas de design costumam usar HSV; CSS suporta a função hsl().
Que rácio de contraste devo procurar para um contraste de cor acessível?
Segundo o WCAG 2.1, o texto normal precisa de pelo menos 4,5:1 para AA e 7:1 para AAA; o texto grande (≈18pt / 14pt negrito e maior) precisa de 3:1 para AA e 4,5:1 para AAA. Os componentes de interface costumam precisar de 3:1. Manter o teu texto acima destes limites torna-o confortavelmente legível também para utilizadores com baixa visão.
Como se representa o alfa (transparência) num código de cor?
O alfa exprime a opacidade de 0 (totalmente transparente) a 1 (totalmente opaco). Em CSS escreve-se em decimal como rgba(124, 58, 237, .5) ou em HEX de 8 dígitos como #7C3AED80, onde os dois últimos carateres são o canal alfa (00–FF). Uma opacidade de 50% equivale aproximadamente a 80 em HEX. Esta ferramenta gera o alfa em forma RGBA e #RRGGBBAA.
Porque é que o CMYK tem um aspeto diferente do HEX?
HEX/RGB é um modelo aditivo pensado para ecrãs (que adicionam luz); CMYK é um modelo subtrativo pensado para a impressão (que adiciona tinta). Algumas cores vivas que um ecrã pode mostrar não podem ser reproduzidas exatamente com tinta, pelo que a conversão para CMYK é uma aproximação. Para resultados de impressão exatos, usa o perfil de cor ICC correspondente ou uma referência Pantone.
O que são os códigos de cor OKLCH e LAB?
Ao contrário do RGB, centrado no ecrã, OKLCH e LAB são espaços de cor modernos organizados em torno da perceção humana. LAB (CIELAB) é independente do dispositivo e mede a diferença entre duas cores de forma próxima de como o olho a perceciona; LCH é a sua forma cilíndrica (tom/croma). OKLCH constrói-se em torno dos eixos Luminosidade, Croma e Tom, concebido especificamente para CSS com uma luminosidade coerente e uma vasta gama: escreve-se como oklch(54,1% 0,247 293). Esta ferramenta gera a cor que escolheres em OKLCH, LAB e LCH instantaneamente.
Como se converte uma cor para código Tailwind, Swift ou Flutter?
Ao escolher uma cor, a ferramenta gera automaticamente uma saída de código para programadores: uma variável CSS (--color: #7C3AED;), SCSS ($color: #7C3AED;), uma classe arbitrária de Tailwind (bg-[#7C3AED]), Swift UIColor, um inteiro de cor Android/Kotlin color int (0xFF7C3AED), e Flutter Color (Color(0xFF7C3AED)). Podes copiar cada linha com um clique; se a opacidade for inferior a 100% a saída atualiza-se para ARGB de 8 dígitos.
Para que serve a simulação de daltonismo?
Cerca de 8% das pessoas (mais frequentemente homens) têm alguma forma de daltonismo. A simulação mostra aproximadamente como se perceciona a cor que escolheste em protanopia, deuteranopia, tritanopia, e acromatopsia, para que possas verificar se as distinções baseadas apenas na cor (como distintivos de estado vermelho/verde) continuam a ser distinguíveis também para estes utilizadores. A boa prática é nunca fazer da cor o único portador de significado, e reforçá-la com contraste suficiente.

Metodologia e fontes

O Conversor de cor do ToolPico é uma ferramenta gratuita e independente. As conversões aplicam diretamente os cálculos padrão do espaço de cor sRGB: HEX ↔ RGB usa a conversão em base 16; RGB ↔ HSL e RGB ↔ HSV normalizam cada canal entre 0 e 1 e aplicam as fórmulas padrão de tom/saturação/luminosidade; CMYK usa uma conversão subtrativa simples. A secção de contraste aplica exatamente a definição de luminância relativa WCAG 2.1 (c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 e L = 0,2126·R + 0,7152·G + 0,0722·B) e a fórmula de rácio de contraste (L1+0,05)/(L2+0,05). Todos os cálculos são executados inteiramente no teu navegador; nenhum dado de cor é alguma vez enviado para um servidor.

Base: conversões do espaço de cor sRGB (IEC 61966-2-1) · rácio de contraste WCAG 2.1 (W3C) · coeficientes de luminância relativa baseados na CIE. Última atualização: 26 de julho de 2026. As fórmulas de conversão de cor e de contraste são padrão e fixas; esta página é revista periodicamente para se manter atualizada. Os resultados são fornecidos apenas a título informativo — o aspeto real no ecrã pode variar consoante a calibração do monitor e o perfil de impressão.

🔗 Adicionar esta ferramenta ao teu site

Copia o código abaixo para o teu próprio site. A ferramenta é gratuita, está sempre atualizada, e funciona inteiramente na tua página. Não é necessário registo.

Pré-visualização →
⚡ Built with ToolPico · toolpico.com