HEX para cor RGB

De uma amostra hexadecimal para canais

Converta uma cor #RGB ou #RRGGBB em três valores de canais RGB. Use essa direção quando um token de design ou regra CSS fornece um código hexadecimal, mas um controle gráfico solicita números inteiros vermelho, verde e azul separados. O # opcional é uma notação, não parte do valor numérico. A abreviatura de três dígitos é expandida antes da conversão, portanto #ABC significa #AABBCC em vez de três pequenos valores de canal.

Cada par hexadecimal de dois dígitos torna-se um canal vermelho, verde ou azul de 0 para 255; os dígitos de abreviatura são dobrados. Para #2A7FDC, os pares 2A, 7F e DC tornam-se 42, 127 e 220 em decimal. Insira apenas três ou seis dígitos hexadecimais; códigos de quatro e oito dígitos incluem alfa e são intencionalmente rejeitados aqui. A saída é uma expressão rgb() pronta para CSS ou para leitura de canais individuais.

Entendendo os modelos de cores

Ao transferir uma amostra HEX para três campos de canal, leia os pares na ordem vermelho-verde-azul e preserve os zeros à esquerda. O resultado não tem canal alfa; essa ferramenta usa RGB inteiro e HSL convencional, não perfis de gerenciamento de cores. HEX e RGB descrevem os mesmos três canais aditivos de luz. Cada canal tem um valor inteiro de zero a 255, e hexadecimal escreve esse valor com dois dígitos de base 16. Um código de seis dígitos, portanto, tem pares vermelho, verde e azul nessa ordem. HSL é outra maneira de descrever uma cor RGB: matiz identifica uma posição na roda de cores, saturação controla a distância de um cinza da mesma luminosidade e luminosidade coloca a cor entre preto e branco. Essas representações são úteis para comparar tokens de design, ler CSS e ajustar uma paleta sem adivinhar o significado de um código.

Escolhendo a representação certa

Um código como #0010FF começa com um canal vermelho zero; deixar cair o primeiro par mudaria o significado de cada canal. O resultado pode ser colado em uma declaração rgb() CSS, mas a saída não pode dizer como um perfil de exibição específico o renderiza. Se o token de design original incluir alfa, registre-o separadamente antes dessa conversão de três canais. Comparar a amostra de origem e a renderização RGB é uma verificação visual útil, especialmente depois de copiar um código de uma captura de tela ou especificação.

Para uma verificação concreta, a entrada de exemplo #2A7FDC produz rgb(42, 127, 220). Mantenha o original ao lado do resultado ao compará-lo com outro aplicativo. Para uma segunda verificação, insira o resultado exibido na ferramenta de cor reversa e compare-o com a entrada original. HEX e inteiro RGB podem passar pela conversão de ida e volta sem alteração; porcentagens HSL podem arredondar um canal RGB por um. Mantenha o token de origem se essa distinção for importante.