Conversor de HEX para RGB
Conversor online e gratuito de HEX para RGB. Digite qualquer código HEX e obtenha instantaneamente RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB e Win32 COLORREF. Inclui um seletor de cor em canvas, verificador de contraste WCAG 2.1, 6 tipos de harmonia de cores, escala de 10 níveis de tons e matizes, simulação de daltonismo de 7 tipos, conta-gotas com lupa sobre imagens, gerador de gradientes, gerador de filtros CSS e correspondência com a paleta do Tailwind v3.
- 19 simultaneous format conversions
- WCAG AA/AAA contrast checker
- 6 color harmony palette types
- Image eyedropper with magnifying loupe
Also accepts: rgb() · hsl() · CSS color names · shorthand #F00
| HEX | — | |
| HEX (no #) | — | |
| RGB | — | |
| RGBA | — | |
| HSL | — | |
| HSLA | — | |
| HSV / HSB | — | |
| HWB | — | |
| CMYK | — | |
| CIE Lab | — | |
| LCH | — | |
| OKLCH | — | |
| CSS Named | — | |
| Integer | — | |
| 0x Notation | — | |
| Android ARGB | — | |
| Swift UIColor | — | |
| Java Color | — | |
| .NET Color | — |
Closest Tailwind v3
Mathematically derived color palettes. Click any swatch to load that color.
10-step shade/tint scale inspired by Tailwind CSS naming. Click any chip to load it.
Large Text Sample — 18pt Bold
Small body text — The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet consectetur.
How your color appears to people with different types of color vision deficiency. Simulations use peer-reviewed transformation matrices (Viénot, Brettel & Mollon 1997/1999). ~8% of men and ~0.5% of women have some form of color blindness.
Dominant Colors
CSS Filter Generator
Recolor a black SVG/icon to your selected color using a CSS filter.
—
How to Use
- Digite um código HEX — digite
#3B82F6, ou cole qualquer formato:rgb(),hsl(), ou um nome de cor CSS. A ferramenta detecta automaticamente todos os formatos. - Arraste o seletor de canvas — o quadrado de saturação/brilho e a faixa de matiz permitem explorar cores visualmente sem digitar nada.
- Copie qualquer um dos 19 formatos de saída instantaneamente — HEX, RGB, HSL, CMYK, Lab, LCH, OKLCH, Swift, Java, .NET e mais, cada um com seu próprio botão de cópia.
- Explore as abas de recursos — gere paletas de cores harmoniosas, verifique a acessibilidade WCAG, simule 7 tipos de daltonismo, escolha cores de uma imagem enviada e crie gradientes.
Conversor de Cor HEX para RGB
O conversor de cor HEX para RGB é uma das ferramentas mais usadas no desenvolvimento web e no design de interfaces. Nosso conversor gratuito vai muito além de uma simples troca de formato numérico — é um espaço de trabalho de cores completo que gera simultaneamente 19 formatos de cor, cria paletas acessíveis, verifica o contraste WCAG e simula o daltonismo, tudo em tempo real enquanto você digita ou arrasta.
O que é um código de cor HEX?
Um código de cor HEX (hexadecimal) é uma sequência de 6 caracteres precedida por #, como #3B82F6.
Cada par de caracteres representa um canal de cor — vermelho, verde e azul — expresso em base 16.
Por exemplo, #FF0000 é vermelho puro: R=255 (FF), G=0 (00), B=0 (00).
Os códigos HEX são a linguagem universal da cor em navegadores web, CSS, ferramentas de design como Figma e Sketch,
e marcação HTML.
O que é RGB?
RGB (vermelho, verde, azul) é o modelo de cor aditivo usado por todas as telas digitais. Cada canal
varia de 0 a 255. rgb(59, 130, 246) é o equivalente em CSS de #3B82F6 —
um azul vibrante usado na paleta blue-500 do Tailwind CSS. Converter entre HEX e RGB
é necessário sempre que você alterna entre notações abreviadas de CSS, ferramentas de design e linguagens de programação.
19 formatos de cor de uma vez
Além de HEX e RGB, esta ferramenta gera instantaneamente: RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, CIE Lab,
LCH, OKLCH, XYZ, Integer, notação 0x, Android ARGB, Swift UIColor, Java AWT Color,
e .NET Color.FromArgb() — todos os formatos usados em CSS, Android, iOS, impressão e programação gráfica.
Seletor de cor com Canvas
O seletor de cor integrado usa a Canvas API para renderizar um quadrado de saturação-brilho suave e
uma faixa de matiz. Arraste a mira para qualquer ponto, ou arraste a faixa de matiz para percorrer todo o espectro.
O seletor funciona a 60fps usando requestAnimationFrame e oferece suporte completo a toque em dispositivos móveis.
Este é um seletor verdadeiramente profissional, não o limitado <input type="color"> nativo do navegador.
Gerador de paletas (6 tipos de harmonia)
Harmonias de cores derivadas matematicamente tornam a criação de paletas instantânea. Escolha entre paletas Complementar, Análoga, Triádica, Complementar dividida, Tetrádica e Monocromática. Cada amostra é clicável — carregando aquela cor no conversor. Exporte qualquer paleta como propriedades customizadas de CSS, configuração do Tailwind, variáveis SCSS ou JSON.
Verificação de acessibilidade WCAG
Cada cor que você insere é avaliada instantaneamente em relação às diretrizes de acessibilidade WCAG 2.1. O verificador de contraste testa sua cor em relação a qualquer cor de texto (branco por padrão) e mostra as taxas de contraste com selos de aprovado/reprovado para AA Normal (4,5:1), AA Grande (3:1), AAA Normal (7:1) e AAA Grande (4,5:1). Troque o primeiro plano e o fundo com um clique.
Divida o código HEX de 6 dígitos em três pares e converta cada um da base 16 para a base 10. Por exemplo, em #3B82F6: 3B = R=59, 82 = G=130, F6 = B=246. Nossa ferramenta faz isso instantaneamente e também gera outros 18 formatos simultaneamente.
O HEX de 3 dígitos (#F00) é uma abreviação: cada dígito é duplicado (#FF0000). O de 6 dígitos é o padrão. O de 8 dígitos (#FF0000CC) inclui um canal de alfa/transparência nos dois últimos dígitos. Use o controle deslizante de alfa para gerar a saída HEX8 de 8 dígitos.
Sim — tanto o campo de HEX quanto a aba "Colar Qualquer Formato" aceitam qualquer formato de cor. Cole rgb(59,130,246), hsl(217,91%,60%), cornflowerblue, ou até valores separados por vírgula como 59, 130, 246, e a ferramenta converte automaticamente.
As WCAG (Diretrizes de Acessibilidade para Conteúdo Web) definem taxas de contraste mínimas para garantir que o texto seja legível por pessoas com baixa visão. O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (18pt ou mais, ou 14pt em negrito). O nível AAA exige 7:1 e 4,5:1, respectivamente. Atender a esses padrões é necessário para a conformidade com a ADA e para boas práticas de UX.
OKLCH é um espaço de cor moderno e perceptualmente uniforme, com suporte nativo no CSS Color Level 4. Diferente do HSL, mudanças numéricas iguais em OKLCH correspondem a mudanças de cor igualmente percebidas, tornando-o ideal para gerar escalas de cor acessíveis e consistentes. Use a saída OKLCH ao trabalhar com CSS moderno.
Aplicamos matrizes de transformação linear 3x3 aos seus valores RGB — uma matriz distinta para cada tipo de deficiência de visão de cores — com base em pesquisas revisadas por pares de Vienot, Brettel e Mollon (1997/1999). Os 7 tipos simulados são: Protanopia, Deuteranopia, Tritanopia, Protanomalia, Deuteranomalia, Tritanomalia e Acromatopsia (daltonismo completo).
Ele gera uma string da propriedade CSS filter que transforma um SVG ou ícone preto na cor que você selecionou. Isso é extremamente útil para bibliotecas de ícones (Font Awesome, Heroicons) quando você precisa recolorir elementos SVG sem editar os arquivos de origem. Você o encontra na aba Gradiente.
Não. Todos os cálculos de cor são feitos totalmente no seu navegador usando JavaScript. As imagens que você envia são processadas localmente pela Canvas API e nunca saem do seu dispositivo. O histórico de cores e os favoritos são salvos apenas no localStorage do seu navegador.