Conversor de Cores

Continuar na ferramenta

Mais páginas desta ferramenta

rgb para hex

Converter RGB para HEX

Design systems, CSS e HTML esperam uma única string de seis caracteres, não três números soltos. Esta página parte de rgb(14, 165, 233) e produz o token pronto, tratando também os dois problemas mais comuns: canal fora da faixa 0 a 255 e valores fracionários vindos de outra ferramenta.

Do número de canal ao token hexadecimal

Cada canal RGB (0 a 255) vira dois dígitos hexadecimais na ordem vermelho, verde, azul. É a mesma conversão de base 10 para base 16 que qualquer calculadora faz, só que sempre preenchida com dois caracteres: 14 em decimal é apenas "e" em hex, mas o conversor escreve "0e" para manter os seis dígitos que CSS, Tailwind e a maioria dos design tokens exigem.
Quando um canal chega fora de 0 a 255, o conversor arredonda o valor decimal para o inteiro mais próximo e depois trava (clampa) no limite: um canal de 300 vira 255 (FF), e um canal negativo vira 0 (00). Isso importa porque ferramentas de design às vezes exportam RGB com números fora dessa faixa por engano de escala, e o HEX resultante nunca reflete o excesso.
Valores fracionários também perdem precisão ao virar HEX, porque o formato só guarda 256 níveis inteiros por canal. Um canal de 165,4 é arredondado para 165 antes da conversão, então dois RGB próximos como 165,1 e 165,4 caem no mesmo HEX (a5). É esperado ao converter cores exportadas em ponto flutuante (como o RGB de 0 a 1 usado no Figma) e não indica um bug do conversor.

Exemplos RGB → HEX

Azul de interface

Entrada: rgb(14, 165, 233)
Saída esperada: #0ea5e9

14 em hex é 0e, 165 é a5 e 233 é e9: os três pares preenchidos formam o token 0ea5e9, comum em UIs modernas.

Branco puro

Entrada: rgb(255, 255, 255)
Saída esperada: #ffffff

O maior valor de canal, 255, é sempre FF; repetido nos três canais dá o caso mais simples de conferir.

Canal fracionário e fora da faixa

Entrada: rgb(14.6, 165.4, 300)
Saída esperada: #0fa5ff

14,6 arredonda para 15 (0f), 165,4 arredonda para 165 (a5) e 300 é travado em 255 (ff): arredondamento e clamp acontecem antes da conversão para hex.

FAQ da ferramenta completa

A ferramenta converte a mesma cor entre HEX, RGB, HSL e outros formatos?

Sim. A proposta é mostrar representações equivalentes da mesma cor em formatos diferentes, facilitando uso em CSS, design systems, documentação visual e integração entre ferramentas de design e desenvolvimento. Você digita em um formato e recebe todos os outros sincronizados ao mesmo tempo, incluindo HSV, CMYK, LAB e XYZ.

HEX e RGB representam a mesma cor?

Qual é a diferença entre HEX, RGB e HSL?

O que significa o canal alpha de uma cor?

Por que a mesma cor pode parecer diferente em telas diferentes?

Quando faz mais sentido usar HSL em vez de HEX?

CMYK e RGB servem para a mesma coisa?

Toda conversão de cor é perfeita?

Perguntas frequentes

Por que meu RGB decimal do Figma não bate com o HEX aqui?

O Figma às vezes exporta canais entre 0 e 1 (fração do byte), não entre 0 e 255. Se você colar esse valor sem multiplicar por 255 antes, o conversor lê um número quase zero em cada canal e o HEX resultante fica escuro demais.

RGB negativo ou acima de 255 é um erro?

Fora do CSS puro, sim, geralmente é sinal de um cálculo de mistura de cor que passou do limite. O conversor não recusa o valor, ele trava (clampa) em 0 ou 255 antes de gerar o HEX, então o token final some com o excesso silenciosamente.

O HEX precisa estar em maiúsculas para funcionar no CSS?

Não, CSS trata #0ea5e9 e #0EA5E9 como a mesma cor. A convenção minúscula é só um padrão de estilo mais comum em código, o navegador ignora a caixa dos seis caracteres hexadecimais.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

rgb para hex

Converter RGB para HEX

Do número de canal ao token hexadecimal

Cada canal RGB (0 a 255) vira dois dígitos hexadecimais na ordem vermelho, verde, azul. É a mesma conversão de base 10 para base 16 que qualquer calculadora faz, só que sempre preenchida com dois caracteres: 14 em decimal é apenas "e" em hex, mas o conversor escreve "0e" para manter os seis dígitos que CSS, Tailwind e a maioria dos design tokens exigem.

Quando um canal chega fora de 0 a 255, o conversor arredonda o valor decimal para o inteiro mais próximo e depois trava (clampa) no limite: um canal de 300 vira 255 (FF), e um canal negativo vira 0 (00). Isso importa porque ferramentas de design às vezes exportam RGB com números fora dessa faixa por engano de escala, e o HEX resultante nunca reflete o excesso.

Valores fracionários também perdem precisão ao virar HEX, porque o formato só guarda 256 níveis inteiros por canal. Um canal de 165,4 é arredondado para 165 antes da conversão, então dois RGB próximos como 165,1 e 165,4 caem no mesmo HEX (a5). É esperado ao converter cores exportadas em ponto flutuante (como o RGB de 0 a 1 usado no Figma) e não indica um bug do conversor.

Exemplos RGB → HEX

Azul de interface

Entrada: rgb(14, 165, 233)
Saída esperada: #0ea5e9

14 em hex é 0e, 165 é a5 e 233 é e9: os três pares preenchidos formam o token 0ea5e9, comum em UIs modernas.

Branco puro

Entrada: rgb(255, 255, 255)
Saída esperada: #ffffff

O maior valor de canal, 255, é sempre FF; repetido nos três canais dá o caso mais simples de conferir.

Canal fracionário e fora da faixa

Entrada: rgb(14.6, 165.4, 300)
Saída esperada: #0fa5ff

14,6 arredonda para 15 (0f), 165,4 arredonda para 165 (a5) e 300 é travado em 255 (ff): arredondamento e clamp acontecem antes da conversão para hex.

FAQ da ferramenta completa

A ferramenta converte a mesma cor entre HEX, RGB, HSL e outros formatos?

HEX e RGB representam a mesma cor?

Qual é a diferença entre HEX, RGB e HSL?

O que significa o canal alpha de uma cor?

Por que a mesma cor pode parecer diferente em telas diferentes?

Quando faz mais sentido usar HSL em vez de HEX?

CMYK e RGB servem para a mesma coisa?

Toda conversão de cor é perfeita?

Perguntas frequentes

Por que meu RGB decimal do Figma não bate com o HEX aqui?

RGB negativo ou acima de 255 é um erro?

O HEX precisa estar em maiúsculas para funcionar no CSS?

Não, CSS trata #0ea5e9 e #0EA5E9 como a mesma cor. A convenção minúscula é só um padrão de estilo mais comum em código, o navegador ignora a caixa dos seis caracteres hexadecimais.