Towalles Towalles

Conversor de cores

Alterna os formatos de cores entre especificações de design e CSS. Edite HEX, RGB ou HSL; desfoque para sincronizar outros formatos e visualizar a amostra.

Privacidade: processado localmente, nunca carregado.

↓ Colar na área de entrada abaixo para ver os resultados instantaneamente

在 HEX、RGB、HSL 之间互转，实时预览色块。

HEX
RGB
HSL

Notas

格式说明

HEX 如 #D4A853；RGB 如 rgb(212, 168, 83)；HSL 如 hsl(41, 56%, 60%)。编辑任一字段后失焦即可同步其他格式。

Alterna os formatos de cores entre especificações de design e CSS. Edite HEX, RGB ou HSL; desfoque para sincronizar outros formatos e visualizar a amostra.

Iniciação rápida

  1. Entre uma cor

    por exemplo, #D4A853 ou rgb (212, 168, 83).

  2. Preview do Swatch

    A amostra superior reflete a cor válida atual.

Características e casos de uso

Converte HEX, RGB, HSL, CMYK com visualização de amostra para design e criação de variáveis CSS.

Use para guias de marca, afinação do modo escuro, impressão versus cor da tela e escolhas da paleta Tailwind.

Casos de uso frontend

Copie HEX do Figma para hsl() para variáveis CSS, ou converta DevTools rgb de volta para design HEX.

Fluxo de trabalho típico

Quando os designers fornecem valores HEX, os desenvolvedores muitas vezes precisam convertê - los para RGB ou HSL para CSS. Digite #4285F4, e ele converte automaticamente para RGB (66.133.244) e HSL (217,89%, 61%) em blur. Copie qualquer formato para o seu editor de código - mais rápido e preciso do que o cálculo manual.

Ao ajustar as cores CSS, modifique diretamente o valor de Luz HSL (por exemplo, mude 61% para 55%). A ferramenta sincroniza HEX / RGB instantaneamente e mostra a nova visualização de cores. Isso supera a edição repetida de código e a atualização do navegador.

Exemplos

Marca de ouro

Input

#D4A853

Output

hsl(41, 56%, 60%)

FAQ

Canal alfa?

8-As entradas digit HEX e rgba / hsla são suportadas.

Por que a saída RGB é diferente da minha ferramenta de design?

Algumas ferramentas de design mostram RGB em porcentagens (0 - 100) ou com perfis de cor. Esta ferramenta segue os padrões CSS com valores RGB de 0 a 255. Quando ocorrerem discrepâncias, verifique com base no valor HEX.