Conversor de RGB para HEX
RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, Win32 COLORREF e HEX8. Inclui um seletor de cor em canvas, verificador de contraste WCAG 2.1, 6 paletas 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, busca de cores CSS com nome e correspondência com a paleta do Tailwind v3.
- Color-coded RGB sliders (R red / G green / B blue)
- 19 instant format outputs with 1-click copy
- 10-step shade/tint scale with export
- History + favorites saved to localStorage
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
- Arraste os controles deslizantes RGB — canais Red, Green e Blue (0–255 cada). Cada trilha do controle exibe seu próprio gradiente de cor para que você veja exatamente o que está misturando.
- Veja o HEX e outros 18 formatos instantaneamente — todas as 19 conversões de formato são atualizadas em tempo real enquanto você arrasta. Copie qualquer formato com um clique.
- Use o seletor em canvas — arraste o quadrado de saturação/brilho ou a faixa de matiz para uma abordagem visual. Totalmente compatível com toque em dispositivos móveis.
- Explore as abas de recursos — gere paletas de cores, crie uma escala de tons/matizes, verifique o contraste WCAG, simule daltonismo, escolha cores a partir de uma imagem ou crie gradientes.
Conversor de Cor RGB para HEX
A conversão de RGB para HEX é uma das tarefas mais fundamentais no desenvolvimento web. Nosso conversor gratuito de RGB para HEX torna isso instantâneo — digite ou arraste os controles deslizantes R, G, B e veja as 19 conversões de formato de cor sendo atualizadas simultaneamente. A própria página reage à cor selecionada, criando uma experiência imersiva digna de uma ferramenta de design profissional.
O que é RGB?
RGB (Red, Green, Blue) é o modelo de cor aditivo usado por todas as telas digitais. As luzes vermelha,
verde e azul se combinam para produzir todas as cores visíveis. Cada canal varia de 0 (desligado) a 255
(intensidade máxima). rgb(0, 0, 0) é preto; rgb(255, 255, 255) é branco;
rgb(59, 130, 246) é um azul vibrante. O RGB é nativo do CSS, HTML Canvas, SVG e
praticamente todos os sistemas gráficos web.
O que é HEX?
Um código de cor HEX é uma string hexadecimal compacta de 6 caracteres, como #3B82F6.
Cada par de caracteres corresponde a um canal RGB em base 16: 3B=59 (R), 82=130 (G), F6=246 (B).
HEX é o formato padrão em folhas de estilo CSS, atributos HTML, Figma, Sketch, Adobe XD
e na maioria dos seletores de cor de ferramentas de design. Converter de RGB para HEX é necessário ao
migrar de cores definidas em código para especificações de ferramentas de design.
Controles Deslizantes RGB com Código de Cor
Diferente dos controles deslizantes genéricos, cada controle de canal nesta ferramenta mostra seu próprio gradiente de cor em tempo real. O controle Red faz a transição do preto ao vermelho, mostrando exatamente o efeito de aumentar esse canal nos valores atuais de green e blue. O mesmo vale para Green e Blue. Isso torna a mistura de cores intuitiva — você vê o efeito de cada mudança antes mesmo de soltar o mouse.
Escala de Tons e Matizes em 10 Etapas
Gere uma escala de cores completa em 10 etapas (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) inspirada na nomenclatura do Tailwind CSS. Clique em qualquer etapa para carregá-la como sua cor de trabalho. Exporte a escala completa como propriedades personalizadas de CSS, configuração do Tailwind, variáveis SCSS ou JSON para integração instantânea ao seu sistema de design.
Gerador de Harmonias de Cores
Seis tipos de harmonias de cores matemáticas são gerados automaticamente: Complementary (opostas no círculo cromático), Analogous (adjacentes, ±30°), Triadic (distribuídas a 120°), Split-Complementary (±150° a partir do complemento), Tetradic (quatro a 90°) e Monochromatic (mesmo tom, luminosidade variável). Clique em qualquer amostra da paleta para carregar essa cor instantaneamente. Exporte como CSS, Tailwind, SCSS ou JSON.
Privacidade em Primeiro Lugar
Todas as conversões acontecem inteiramente no seu navegador. Nenhum dado de cor é enviado a qualquer
servidor. As imagens enviadas são processadas localmente por meio da Canvas API. O histórico de cores
(últimas 20) e os favoritos são armazenados apenas no localStorage do seu navegador.
Converta cada canal RGB (0-255) em uma string hexadecimal de 2 dígitos e concatene com o prefixo #. Por exemplo: R=59=3B, G=130=82, B=246=F6 = #3B82F6. Nossa ferramenta faz isso instantaneamente enquanto você arrasta os controles deslizantes.
HSL (Hue, Saturation, Lightness) organiza a informação de cor de uma forma que corresponde à percepção humana. Hue é o ângulo da cor (0-360), Saturation é a intensidade (0-100%) e Lightness é o brilho (0-100%). É muito mais intuitivo para ajustar cores — você pode clarear uma cor alterando apenas L, em vez de ajustar os três valores RGB.
CMYK (Cyan, Magenta, Yellow, Key/Black) é o modelo de cor subtrativo usado na produção gráfica profissional. Se você está preparando cores para um trabalho de impressão, use a saída CMYK desta ferramenta para especificar os valores de cor precisos para sua impressora ou gráfica.
CIE Lab (L*a*b*) é um espaço de cor no qual distâncias numéricas iguais correspondem a diferenças de cor percebidas iguais — diferente do RGB ou do HSL, em que o mesmo intervalo pode parecer diferente dependendo da região de cor. Ele é usado em ciência da cor, perfis ICC e softwares de design profissionais para comparações precisas de cores.
Calculamos a distância euclidiana entre sua cor RGB e cada cor da paleta padrão do Tailwind v3 (22 famílias de cores x 11 tons = 242 cores) e exibimos as 5 correspondências mais próximas com seus nomes de classe (por exemplo, blue-500), valores HEX e pontuações de distância. Clique no botão de copiar em qualquer linha para copiar o nome da classe.
Abra a aba de recursos Harmonies ou Shades e clique em um dos botões de exportação: CSS Vars, Tailwind, SCSS ou JSON. O código formatado é copiado para a sua área de transferência.
Sim — abra a aba Image, arraste e solte ou envie qualquer imagem, depois passe o cursor para ver uma lupa de ampliação (visualização de pixel em zoom) e clique em qualquer pixel para carregar sua cor exata. A ferramenta também extrai automaticamente até 8 cores dominantes como amostras clicáveis.
Os favoritos e o histórico são armazenados no localStorage do seu navegador e persistem entre sessões no mesmo navegador. Eles não são sincronizados entre dispositivos e serão perdidos se você limpar os dados do navegador. Nada é armazenado em nossos servidores.