Loading...
Loading...
Traduza qualquer cor entre HEX, RGB e HSL com controles deslizantes ao vivo, um seletor interativo e strings CSS prontas para copiar — tudo calculado no seu navegador.
#1A73E8rgb(26, 115, 232)hsl(214, 82%, 51%)WCAG ratio of this color against pure white and pure black backgrounds.
Um conversor de cores traduz entre os três formatos que designers e desenvolvedores usam todos os dias: HEX (#RRGGBB) para folhas de estilo, RGB (vermelho, verde, azul 0–255) para telas e ferramentas de imagem, e HSL (matiz, saturação, luminosidade) para edição intuitiva. Todos eles descrevem o mesmo ponto no espaço de cores sRGB — eles apenas trocam legibilidade por matemática. Esta ferramenta mantém os três em sincronia enquanto você edita qualquer um deles, mostra uma amostra ao vivo e relata um rápido instantâneo de contraste WCAG para que você saiba se a cor é segura para texto em corpo contra branco ou preto. Tudo roda localmente no seu navegador; nenhuma cor é carregada ou registrada.
Cole um valor HEX (com ou sem o # na frente), arraste o seletor de cores nativo ou defina os canais RGB / HSL com os deslizadores ou entradas numéricas.
A grande amostra e o rótulo HEX se atualizam a cada tecla pressionada ou arrasto do deslizante, para que você possa ver a cor antes de se comprometer com ela.
Qualquer que seja o formato que você editou, os outros dois são recalculados instantaneamente na seção Copiar como — HEX, rgb(...), e hsl(...) prontos para colar em CSS, ferramentas de design ou código.
Clique em Copiar em qualquer linha para colocar essa string na sua área de transferência. O botão confirma com uma marca de verificação por 1,5 segundos.
O instantâneo de Contraste mostra a relação WCAG da sua cor contra branco puro e preto puro. Se você precisar de veredictos completos WCAG AA / AAA contra um fundo personalizado, acesse a ferramenta Verificador de Contraste vinculada abaixo.
HEX → RGB:
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL (cada canal escalonado para 0–1):
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
S = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
H depende de qual canal é o máximo:
R: H = 60 · ((G − B) / (max − min) mod 6)
G: H = 60 · ((B − R) / (max − min) + 2)
B: H = 60 · ((R − G) / (max − min) + 4)HEX é apenas RGB escrito em base 16 — três pares de dígitos hexadecimais, um por canal, empacotados em uma única string. HSL é uma reconfiguração perceptual do mesmo cubo RGB: matiz (0–360°) escolhe uma fatia da roda de cores, saturação (0–100%) é quão vívida versus cinza ela é, e luminosidade (0–100%) é quão próxima de branco ou preto ela está. As conversões acima são sem perdas, exceto por arredondamento, então HEX ↔ RGB ↔ HSL ↔ HEX deve retornar ao mesmo valor.
Referência: Módulo de Cor CSS Nível 4 — sRGB
| Entrada | Formatos equivalentes |
|---|---|
#1A73E8 | rgb(26, 115, 232) · hsl(214, 82%, 51%) Azul do Google — uma cor popular para links / botões primários. |
rgb(255, 105, 180) | #FF69B4 · hsl(330, 100%, 71%) Cor nomeada CSS rosa choque, expressa de três maneiras. |
hsl(120, 73%, 75%) | #9EE89E · rgb(158, 232, 158) Um verde pastel — fácil de ajustar levantando o controle L. |
#03A | #0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) A abreviação de três dígitos se expande para seu equivalente de seis dígitos. |
Teste quaisquer duas cores para conformidade com o contraste WCAG AA e AAA para texto e UI.
Calcule sua idade exata em anos, meses e dias a partir de qualquer data de nascimento.
Verifique o índice de massa corporal a partir da altura e peso usando unidades métricas ou imperiais.
Calcule porcentagens, variação percentual e porcentagem de um total em segundos.
Última atualização