Sobre Conversor de cores

O conversor de cores transforma valores entre HEX, RGB, HSL e HSV para CSS do frontend, entrega de design e organização de tokens de tema.

Digite #4f46e5, rgb(...) ou hsl(...) para normalizar a cor em formatos copiáveis.

Como usar o Color Converter

Cole um valor HEX, RGB, RGBA, HSL ou HSLA.
Converta e revise as saídas HEX, RGB, HSL e HSV.
Use o preview da amostra e copie um formato ou todos.

Quando usar

Converter um HEX do design para CSS rgb() ou hsl().
Ajustar lightness e saturation em HSL ao testar hover states.
Normalizar valores de color token durante limpeza de tema.

Formatos de cor e cuidados

HEX, RGB, HSL e HSV descrevem a mesma cor por coordenadas diferentes. Este converter preserva a cor RGB; alpha em RGBA ou HSLA é aceito, mas não preservado na saída.

HEX de 3 dígitos expande para HEX de 6 dígitos.
Canais RGB devem ficar entre 0 e 255.
HSL usa porcentagens em S/L e hue gira de 0 a 360 graus.
HSV é comum em seletores; HSL costuma ser melhor para ajuste de temas CSS.

Perguntas frequentes sobre Conversor de cor

Converte HEX to RGB e RGB to HEX?: Sim. Entrada HEX gera RGB/HSL/HSV, e entrada RGB gera HEX/HSL/HSV.
Por que o alpha não aparece?: A ferramenta foca conversão de cores opacas, então ignora alpha de RGBA/HSLA.
Minhas cores são enviadas?: Não. Parsing, conversão, preview e cópia rodam localmente no navegador.

Conversão de cor e legibilidade

Trocar formato não garante contraste. Antes de usar em texto, botões ou links, teste no fundo real com contraste WCAG, marca e estados UI.

Como escolher um formato de cor CSS

A mesma cor pode ser HEX, RGB, HSL ou HSV, mas cada formato serve melhor a um tipo de manutenção.

Use HEX para valores compactos na entrega de design e tokens de tema estáveis.
Use CSS rgb() ou hsl() quando precisar de alpha, variables ou composição dinâmica.
Use HSL para hover, active e variações mais claras ou escuras, pois hue, saturation e lightness são mais fáceis que RGB bruto.

Checks de acessibilidade antes de publicar cores

Conversão de cor preserva equivalência, mas não comprova legibilidade, clareza de estado ou conformidade de contraste.

Confira texto e botões no fundo real com regras de contraste WCAG.
Não comunique erro, sucesso ou disabled só por cor; inclua texto, ícones ou mudanças de forma.
Ao usar cores de marca em links ou focus rings, valide hover, active, disabled e selected também.