Converta qualquer código de cor HEX para RGB no seu navegador — hex de 3, 6 e 8 dígitos com alfa, todos suportados. Grátis, instantâneo, sem cadastro, suas cores nunca saem da página.
Tints
Shades
Tones
Harmonies
— — — — — Um conversor de hex para RGB é um pequeno utilitário que transforma um código de cor hex (`#FF5733`) nos três valores inteiros de canal que ele representa (`rgb(255 87 51)`). HEX e RGB são os dois formatos em torno dos quais toda folha de estilo web, ferramenta de design e pipeline de pixel de imagem foi construída desde o fim dos anos 1990, e a conversão entre eles é a operação mais comum em qualquer ferramenta de cor. HEX é o formato conciso de copiar e colar que Figma, Sketch, Photoshop e todo PDF de guia de marca exportam por padrão — uma string base 16 de 6 caracteres que cabe confortavelmente em uma propriedade customizada CSS e se lê de relance quando seus olhos aprendem os padrões. RGB é o formato endereçado por canal que APIs de hardware, chamadas de desenho em canvas, manipulação de buffer de imagem, atributos de cor OpenGL e a maioria dos SDKs gráficos esperam — três inteiros 0-255 separados (ou floats normalizados 0-1) que mapeiam diretamente para os subpixels vermelho, verde e azul de um LCD ou para os fósforos de um CRT. Converter entre eles é mecânico: divida o hex em três pares de 2 dígitos e leia cada par como um número base 16. Esta ferramenta roda essa conversão ao vivo enquanto você digita, sem botão "Converter" para clicar, e expõe todo outro formato de cor comum (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, mais as 148 cores nomeadas do CSS) ao lado da saída RGB, grátis.
**O próprio formato RGB merece um olhar mais próximo.** O sRGB padrão de 24 bits codifica cada canal como um inteiro sem sinal de 8 bits de 0 a 255 — 256 valores por canal, 16.777.216 cores no total (256³). O padrão de referência é a IEC 61966-2-1, a especificação sRGB de 1996 ancorada nos primários de fósforo de CRT que dominavam as telas da época. O CSS expõe o RGB pela função `rgb()` em três variações sintáticas. A forma original do CSS 1 usa separadores por vírgula: `rgb(255, 87, 51)`. O CSS Color 4 (Candidate Recommendation do W3C desde 2022) adicionou uma forma moderna separada por espaços: `rgb(255 87 51)`, com um canal alfa opcional depois de uma barra: `rgb(255 87 51 / 0.5)`. As duas formas são intercambiáveis e vêm em todo navegador evergreen. O RGB também aceita canais em porcentagem: `rgb(100% 33% 20%)` é equivalente a `rgb(255 87 51)`, às vezes preferido em folhas de estilo escritas à mão por legibilidade. O alfa especificamente tem uma função `rgba()` separada para suporte legado — `rgba(255, 87, 51, 0.5)` é a forma canônica que funciona em todo lugar até o IE 9. O CSS Color 4 também adicionou uma sintaxe `color(srgb 1 0.341 0.2)` para endereçamento explícito de sRGB, e funções paralelas `color(display-p3 ...)` e `color(rec2020 ...)` para valores de gama ampla que o hex não consegue codificar.
A matemática da conversão vai nos dois sentidos de forma limpa. **HEX para RGB**: parse o hex de 6 dígitos `#RRGGBB` como três números base 16 de 2 dígitos via `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Para a forma abreviada de 3 dígitos `#RGB`, expanda cada dígito duplicando-o (`#F73` → `#FF7733`) antes de parsear — isso *não* é left-pad. Para alfa de 8 dígitos `#RRGGBBAA`, parse o par final do mesmo jeito e divida por 255 para obter o float alfa 0-1. Para a forma abreviada alfa de 4 dígitos `#RGBA`, expanda cada dígito primeiro (`#F738` → `#FF773388`). **RGB para HEX** é o inverso: para cada canal, chame `value.toString(16).padStart(2, '0')` para obter o par hex de 2 dígitos (o `padStart` importa — sem ele, o valor de canal 5 seria serializado como `'5'` em vez de `'05'`, produzindo hex inválido), depois concatene. Ambas as direções são bit-exatas em qualquer sentido: 16² = 256, exatamente correspondendo à faixa de byte 0-255 que cada canal ocupa, então um round-trip HEX → RGB → HEX produz a entrada original verbatim sem deriva de float.
**Por que hex vs RGB?** Hex é mais curto, nativo das ferramentas de design e o formato que seu olho aprende com o tempo — a maioria dos devs front-end identifica `#3b82f6` como o blue-500 do Tailwind de bate-pronto. RGB é endereçamento explícito de canal, mais fácil de computar contra em JavaScript e o único dos dois que aceita alfa e porcentagens de forma limpa. Os dois formatos coexistem porque resolvem problemas diferentes. Folhas de estilo web e guias de marca tendem ao hex porque o custo de copiar e colar domina. Chamadas de desenho em canvas, processamento de imagem, APIs de LED de hardware e qualquer código que faça aritmética por canal tendem ao RGB porque indexar em uma tupla é mais rápido do que fatiar uma string. A troca entre eles acontece dezenas de vezes em um projeto web típico — colar um hex do Figma, converter para inteiros RGB para uma chamada `ctx.fillStyle = ...`, converter de volta para hex para uma definição de variável CSS.
O fluxo HEX → RGB desta ferramenta é uma direção de uma família de 5 spokes que compartilham o mesmo conversor de cor unificado por baixo. O conversor de cores unificado dedicado é o hub — ele mostra todos os 9 formatos simultaneamente editáveis e é a ferramenta certa quando seu fluxo precisa de mais do que apenas hex e RGB. Os spokes de direção única miram intenções específicas de busca no Google: o caminho inverso conversor de RGB para hex, o conversor de hex para HSL para o espaço cognitivo legado de designer, o conversor de hex para OKLCH para design systems perceptualmente uniformes modernos (Tailwind v4 e shadcn agora padronizam OKLCH) e o conversor de hex para CMYK para aproximações de preparação de impressão. Todos os cinco spokes e o hub compartilham o mesmo motor de parsing e a mesma matemática de conversão, então os resultados são garantidamente idênticos pela família toda. Cada conversão roda localmente no seu navegador — seus códigos hex nunca são enviados, nunca registrados e zero requisições de rede disparam enquanto você digita. Confira no DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3 dígitos `#F73`, alfa de 4 dígitos `#F738`, 6 dígitos `#FF5733`, alfa de 8 dígitos `#FF5733CC`, mais a variante sem `#` para cada uma (`F73`, `FF5733`, etc.). O parser normaliza todas para a mesma tupla RGB interna antes da exibição, então você pode colar qualquer forma que sua fonte use sem expandir manualmente a forma abreviada antes. A capitalização também é normalizada — `#ff5733` e `#FF5733` produzem saída idêntica.
O campo RGB expõe o valor na forma moderna do CSS Color 4: `rgb(255 87 51)` para cores opacas, `rgb(255 87 51 / 0.5)` para as com alfa. Ambas as formas funcionam em todo navegador evergreen (Chrome 65+, Safari 13+, Firefox 52+). A forma antiga com vírgulas `rgb(255, 87, 51)` está a um replace mecânico de distância se seu alvo precisa dela; a sintaxe moderna é preferida em código novo porque alinha com as outras sintaxes funcionais do CSS Color 4.
HEX → RGB é matemática inteiro-para-inteiro: `parseInt(hex, 16)` retorna um valor exato 0-255 sem envolvimento de float. A direção inversa (`.toString(16).padStart(2, '0')`) é igualmente exata. Um round-trip HEX → RGB → HEX → RGB → HEX produz a entrada original verbatim, indefinidamente. A fonte-de-verdade interna em OKLCH significa que mesmo a cadeia mais longa HEX → RGB → HSL → OKLAB → HEX permanece bit-estável, o que conversores legados roteando por HSL não garantem.
Hex de 8 dígitos e 4 dígitos com alfa (`#RRGGBBAA` e `#RGBA`) são interpretados corretamente. O par final mapeia para um float alfa 0-1: `00` → 0, `80` → 0,502, `FF` → 1. A saída usa a sintaxe de barra do CSS Color 4 (`rgb(255 87 51 / 0.5)`) por padrão; a forma legada `rgba(255, 87, 51, 0.5)` está a um replace de distância. Útil para migração de design tokens onde valores alfa podem ter ficado enterrados em códigos hex de 8 dígitos.
O mesmo hex que você cola também alimenta HSL, HSV, HWB, OKLCH, OKLAB, CMYK e a cor nomeada CSS mais próxima — todos visíveis de relance na mesma página. Você nunca fica trancado em hex → RGB apenas. Se um colega de equipe precisar da tripla OKLCH para um token Tailwind v4, da cor nomeada mais próxima para prosa de documentação ou da aproximação CMYK para um orçamento de impressão, os valores já estão lá com seus próprios botões Copiar.
Passe um hex e a linha de contraste imediatamente o pontua contra branco e preto usando WCAG 2.1 (piso regulatório: 4,5:1 para corpo de texto, 7:1 para AAA) e APCA Lc (sucessor proposto do WCAG 3: alvo `|Lc| ≥ 75` para corpo de texto). Útil quando você acaba de converter um hex de marca para RGB e quer verificar se ele é realmente legível como cor de corpo de texto antes de embarcar.
Abaixo do seletor, a seção Copiar como código transforma a cor atual em snippets prontos para colar em cinco plataformas: propriedade customizada CSS (`--color-brand: rgb(255 87 51)`), token `@theme` do Tailwind v4, literal `Color(red:green:blue:)` do SwiftUI, constante `Color(0xFFFF5733)` do Jetpack Compose, `Color(0xFFFF5733)` do Flutter. A sintaxe exata que cada plataforma espera, pronta para jogar em um asset catalog iOS, um arquivo de tema Android ou um `ThemeData` do Flutter.
Todo parsing de hex, conversão de RGB, pontuação de contraste e geração de paleta roda localmente no seu navegador. Seus códigos hex nunca são transmitidos, nunca registrados em servidor, nunca analisados. Zero requisições de rede enquanto você digita — confira no DevTools. Seguro para paletas de marca não anunciadas, design tokens internos, mockups em rascunho sob NDA e qualquer outro trabalho de cor confidencial.
A cor atual codifica para o hash da URL como `#hex=ff5733` automaticamente a cada mudança. Copie a URL, cole em uma thread do Slack ou uma issue do GitHub, e qualquer um que abrir cai no mesmo hex com o mesmo resultado RGB. O hash vive apenas na sua barra de endereço e nunca é transmitido ao servidor (navegadores não incluem fragmentos de URL em requisições HTTP), então mesmo compartilhar o link não vaza a cor para terceiros.
O resultado padrão do Google para "hex to rgb" — um formulário de mão única com hex entrando, RGB saindo, sem outros formatos visíveis. Útil para consultas pontuais vindas de busca. Não tem OKLCH, verificação de contraste, detecção de gama, tratamento de alfa e a visão simultânea de múltiplos formatos. Esta ferramenta vence em todo eixo, exceto no caso minimalista de conversão única.
Páginas SEO de longa data por cor com metadados profundos: conversões, paletas, harmonias, gradientes para qualquer hex consultado. UI datada (começo dos anos 2010), sem suporte a OKLCH, sem contraste APCA, sem tratamento de gama ampla. Forte para descoberta SEO de um hex específico via Google; mais fraco para fluxos ativos de conversão onde digitar em uma UX de campos unificados é mais rápido.
Toggle HEX/RGB/HSL amigável para iniciantes em uma página focada em ensino, onipresente em resultados de busca. Sem OKLCH, sem tratamento de alfa além de rgba, sem recursos avançados. Útil como referência ao lado do conteúdo explicativo da W3Schools. Esta ferramenta vence em todo outro eixo: mais formatos, matemática perceptual, recursos de gama + contraste + CVD, exportação moderna de código para Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox e Safari DevTools todos vêm com um color picker que converte hex para RGB inline quando você clica em uma amostra de cor no painel CSS. Grátis, sem instalação, sempre disponível. Não tem OKLCH, não tem URLs compartilháveis, não tem exportação de código para plataformas não-web (SwiftUI, Compose). Vá para o DevTools quando já estiver depurando CSS; vá para esta ferramenta quando precisar de saída cross-platform.
Vem com todo Mac desde o OS X — passe o mouse sobre qualquer pixel e leia os valores RGB / hex / lineares. Excelente para amostrar cores de pixel de qualquer app na tela. Não converte valores hex colados; é um amostrador de tela, não um conversor. Use o botão EyeDropper no seletor desta ferramenta (apenas navegadores Chromium) para a mesma capacidade de amostragem de tela dentro do navegador.
Páginas SEO por cor cobrindo muitos espaços (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Não tem suporte moderno a OKLCH e a UX de edição em campos unificados. Páginas de conteúdo auto-geradas parecem fazenda de conteúdo, mas os dados de conversão estão corretos. Bom para garimpar metadados de cor individuais via Google; esta ferramenta é mais rápida para fluxos ativos.
#FF5733
Saída RGB: `rgb(255 87 51)`. O caso de uso clássico — um designer jogou uma cor de marca no Figma, você tirou um screenshot, um conta-gotas te deu o hex e agora você precisa dos inteiros de canal para uma chamada de desenho em canvas, uma tira de LED de hardware ou matemática de pixel contra um buffer de imagem. A sintaxe separada por espaços do CSS Color 4 mostrada é a forma moderna; a forma antiga com vírgulas `rgb(255, 87, 51)` é idêntica em significado e suportada em todo navegador desde o IE 3.
#3b82f6
Saída RGB: `rgb(59 130 246)`. O painel de cor da Adobe (no Photoshop, Illustrator e InDesign) aceita inteiros RGB na faixa 0-255 como entrada nativa — cole 59 / 130 / 246 nas três caixas de canal e você acerta exatamente o `blue-500` do Tailwind. Útil quando um designer precisa fazer um mockup de uma cor web em um app de layout voltado para impressão, ou quando você está amostrando cores de marca para uma biblioteca de amostras para edições de imagem.
#FF573380
Saída RGB: `rgb(255 87 51 / 0.5)`. O último par (`80`) decodifica como `128/255 ≈ 0.502`, exposto como canal alfa via a sintaxe de barra do CSS Color 4. A forma antiga equivalente é `rgba(255, 87, 51, 0.5)`, que ainda tem suporte em todo lugar e é o que pré-processadores mais velhos esperam. Hex de 8 dígitos chegou nativamente a todos os navegadores evergreen em 2018; antes disso, o alfa precisava ser expresso pela função `rgba()`.
#F73
Saída RGB: `rgb(255 119 51)`. A especificação CSS define o hex de 3 dígitos como uma forma abreviada onde cada dígito é duplicado para formar o equivalente de 6 dígitos: `#F73` expande para `#FF7733`, então R = `FF` = 255, G = `77` = 119, B = `33` = 51. Isso *não* é left-pad — `#F73` **não** é `#000F73`. Muitos iniciantes erram isso; o comportamento de expansão da ferramenta deixa a regra visível de relance.
Tabela de referência dos 10 códigos hex mais convertidos e seus equivalentes RGB — primárias puras, secundárias puras e duas cores de marca do mundo real da paleta Tailwind.
Preto puro. Todos os três canais em zero — a ausência de luz emitida. Triplo RGB (0, 0, 0).
#000000 → rgb(0 0 0) Preto puro em tela raramente é a escolha de design certa — experimente `#111` ou OKLCH com luminosidade 0,1-0,15 para corpo de texto mais suave.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Branco puro. Todos os três canais no seu valor máximo (255). A cor mais brilhante em sRGB.
#FFFFFF → rgb(255 255 255) Fundos brancos puros podem produzir cansaço visual em ambientes escuros — considere `#fafafa` ou OKLCH 0,98 para alternativas mais quentes.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Vermelho puro. Canal R no máximo, G e B em zero. A primeira das três primárias sRGB.
#FF0000 → rgb(255 0 0) Vermelho puro é altamente saturado e raramente cabe em uma paleta de marca — a maioria das cores de marca "vermelhas" fica mais perto de #DC2626 ou #E53935.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Verde puro. Canal G no máximo, R e B em zero. Cor nomeada CSS `lime` (não `green`, que é #008000).
#00FF00 → rgb(0 255 0) A palavra-chave CSS `green` resolve para #008000 (meio-brilho), não #00FF00 — uma fonte frequente de confusão. Use `lime` para o verde RGB puro.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Azul puro. Canal B no máximo, R e G em zero. A terceira primária sRGB.
#0000FF → rgb(0 0 255) Azul puro sobre fundo branco falha no contraste WCAG AA (3,7:1) — considere azuis de marca mais escuros como #1D4ED8 (Tailwind blue-700) para corpo de texto.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Ciano — verde e azul no máximo, vermelho em zero. Uma das três secundárias sRGB. Cor nomeada CSS `cyan` (ou equivalentemente `aqua`).
#00FFFF → rgb(0 255 255) Cyan e aqua são sinônimos exatos no CSS — ambos resolvem para #00FFFF. Escolha um e mantenha consistência pela sua folha de estilo.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Magenta — vermelho e azul no máximo, verde em zero. Cor nomeada CSS `magenta` (ou equivalentemente `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta e fuchsia são sinônimos exatos no CSS — ambos resolvem para #FF00FF. Comum em padrões de teste e overlays de ferramentas de dev.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Amarelo — vermelho e verde no máximo, azul em zero. A mais brilhante das três secundárias sRGB por luminância percebida.
#FFFF00 → rgb(255 255 0) Amarelo é a cor não-branca de maior luminância em tela — texto amarelo sobre fundos brancos fica quase invisível, mesmo que o hex pareça bom no papel.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
A cor de marca blue-500 padrão do Tailwind CSS — o "azul web" canônico de meados dos anos 2020. Usado em incontáveis dashboards, sites de marketing e ferramentas administrativas.
#3b82f6 → rgb(59 130 246) O Tailwind v4 redefine o blue-500 em OKLCH (`oklch(0.629 0.193 263.4)`) para rampas perceptualmente uniformes — o hex continua o mesmo como fallback.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
O rose-500 padrão do Tailwind CSS — um rosa-avermelhado de alta saturação usado comumente para botões de destaque, estados de alerta e contraste de marca.
#f43f5e → rgb(244 63 94) Rose-500 passa em WCAG AA (4,6:1) contra branco para texto grande mas falha para corpo de texto — combine com rose-600 (#e11d48) ou mais escuro para corpo de texto sobre branco.
Precisa de OKLCH em vez disso? Experimente o conversor de hex para OKLCH dedicado para saída perceptualmente uniforme.
Jogue qualquer valor hex na entrada HEX — com ou sem o `#` na frente, na forma abreviada de 3 dígitos (`#F73`), forma cheia de 6 dígitos (`#FF5733`), forma abreviada alfa de 4 dígitos (`#F738`) ou forma cheia alfa de 8 dígitos (`#FF5733CC`). A ferramenta normaliza todas as cinco formas de entrada para a mesma cor canônica internamente. A capitalização não importa (`#ff5733` e `#FF5733` interpretam de forma idêntica). Caracteres inválidos ou contagem errada de dígitos produzem um erro discreto inline; hex válido atualiza todo outro campo de formato em tempo real.
O campo RGB abaixo do campo HEX mostra o valor `rgb()` correspondente na sintaxe moderna separada por espaços do CSS Color 4: `rgb(255 87 51)` para uma cor opaca, `rgb(255 87 51 / 0.5)` para uma com alfa. Cada canal é um inteiro 0-255; o alfa é normalizado para 0-1. Os valores são bit-exatos — `parseInt('FF', 16)` retorna 255, sem aritmética de float envolvida, então um round-trip de volta para hex produz a entrada original verbatim.
Cada card de formato tem um botão Copiar à direita. Um clique e o valor cai na sua área de transferência — o rótulo do botão brevemente pisca "Copiado!" para você saber. A string copiada é a sintaxe canônica do CSS Color 4 (`rgb(255 87 51)`); se seu alvo precisa da forma antiga com vírgulas, a conversão é mecânica (troque espaços por `, `). Para saída específica de plataforma (SwiftUI, Compose, Flutter, Tailwind v4), use a seção Copiar como código abaixo do seletor.
O mesmo hex que você cola também acende os outros campos de formato — HSL para CSS legado, OKLCH e OKLAB para design systems perceptualmente uniformes, HSV e HWB para fluxos de seletor de cor de designer, CMYK para estimativas de impressão e a cor nomeada CSS mais próxima para documentação e prosa. Você nunca fica trancado em hex → RGB apenas; se precisar também da tripla OKLCH para jogar em um bloco `@theme` do Tailwind v4, ela está bem ali no campo OKLCH com seu próprio botão Copiar.
Abaixo da grade de formatos há um quadrado SL + controle deslizante de matiz + controle deslizante de alfa para exploração visual. Arraste qualquer controle e cada campo de texto atualiza em tempo real, incluindo o HEX e RGB com que você começou. Em navegadores baseados em Chromium (Chrome, Edge, Brave) o botão EyeDropper ativa a API nativa `EyeDropper` para amostrar qualquer pixel na tela, incluindo fora da janela do navegador — útil quando você quer capturar um hex da UI de outro app sem precisar tirar um screenshot antes.
A forma abreviada de 3 dígitos `#RGB` expande *duplicando cada dígito*, não fazendo left-pad com zeros. `#F73` vira `#FF7733` (laranja vibrante), não `#000F73` (azul escuro). Esse é o canto mais errado da sintaxe de cor CSS; iniciantes frequentemente assumem que a forma abreviada é algum tipo de zero-pad e acabam com cores totalmente erradas. A mesma regra se aplica à forma abreviada alfa de 4 dígitos `#RGBA` — cada dígito duplica para formar o equivalente de 8 dígitos.
Assume #F73 left-pads to #000F73: expected: dark blue rgb(0, 15, 115) actual: bright orange rgb(255, 119, 51)
3-digit shorthand duplicates each digit: #F73 → #FF7733 → rgb(255, 119, 51) Verified by the tool's live expansion as you type.
Converter RGB de volta para hex exige que `toString(16)` de cada canal seja left-padded para 2 dígitos. Sem `padStart(2, '0')`, valores de canal de um dígito produzem hex inválido: `rgb(5, 87, 51)` seria serializado como `#55733` (5 caracteres) em vez de `#055733` (6 caracteres). Muitos conversores ad-hoc pulam o pad e produzem saída quebrada para qualquer canal abaixo de 16. O idioma padrão é `value.toString(16).padStart(2, '0')` para cada um de R, G, B.
Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex. Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255. O hex CSS de 8 dígitos é `#RRGGBBAA` — alfa é o par *final*. Algumas bibliotecas de cor (notavelmente o `Color.parseColor()` antigo do Android) usam a ordem oposta `#AARRGGBB` com alfa como o par *inicial*, o que é incompatível com hex CSS. Um hex web `#FF573380` (laranja a 50% de alfa) interpretado como `#AARRGGBB` vira alfa=255, R=87, G=51, B=128 — um ciano escuro em opacidade total. Sempre verifique a ordem de alfa da plataforma-alvo antes de fazer round-trip de hex de 8 dígitos.
Paste CSS 8-digit hex into legacy Android Color.parseColor(): #FF573380 interpreted as #AARRGGBB → wrong color and wrong alpha entirely.
Use the target platform's documented format: for Android Compose: Color(0xFFFF5733) with alpha as first byte for CSS: #FF573380 with alpha as last byte Don't cross-paste between the two without re-ordering.
Canais RGB são gama-codificados, não lineares. Tirar a média de dois valores RGB dá um ponto médio perceptualmente errado. `(255, 0, 0)` na média com `(0, 255, 0)` produz `(127, 127, 0)`, uma azeitona escura barrenta, não o ponto médio brilhante de amarelo que você esperaria de misturar luz vermelha e verde. Para blending correto, decodifique para RGB linear primeiro via a função de transferência sRGB (CSS Color 4 §11.2), tire a média em espaço linear, depois recodifique. Ou trabalhe em OKLAB / OKLCH onde a distância perceptual é uniforme.
Average gamma-encoded RGB directly: (rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0) Looks like dark olive, not bright yellow.
Average in linear-RGB: decode → linear-RGB → average → re-encode → rgb(188, 188, 0) Visibly bright yellow, matching what physical light mixing produces.
Ferramentas de Conversão
Converta números entre binário, hexadecimal, decimal, octal e qualquer base personalizada (2-36) instantaneamente. Gratuito, privado, sem cadastro — todo o processamento acontece no seu navegador.
Ferramentas de Conversão
Converta HEX para RGB, HSL, OKLCH, OKLAB e CMYK no seu navegador — copie qualquer formato com um clique. Grátis, sem cadastro, suas cores nunca saem da página.
Ferramentas de Conversão
Converta cores HEX para CMYK no seu navegador. Aproximação ingênua baseada em sRGB para prévias de impressão. Grátis, sem cadastro, suas cores ficam locais.
Ferramentas de Conversão
Converta qualquer cor hex para HSL no seu navegador — hex de 3, 6 e 8 dígitos com alfa, todos suportados. Grátis, instantâneo, sem cadastro, suas cores nunca saem da página.
Ferramentas de Conversão
Converta HEX para OKLCH para tokens de design do Tailwind v4. Saída perceptualmente uniforme ao vivo com avisos de gama Display P3. Grátis, apenas no navegador.
Ferramentas de Conversão
Reduza o tamanho de imagens em até 80% — comprima JPEG, PNG e WebP no navegador, sem upload. Lote de 20 imagens, ajuste de qualidade, compare antes e depois. Gratuito e privado.