Entrada
Preparando seu ambiente de trabalho…
Como usar
- Digite uma cor HEX, RGB, HSL ou um nome de cor CSS.
- Confira a amostra e os valores convertidos.
- Use o botão Copiar de HEX, RGB ou HSL para obter o formato desejado.
Uma cor em três formatos CSS
Um token de design pode chegar em HEX enquanto a folha de estilos usa RGB ou HSL. Mudar a notação permite reutilizar a mesma cor sem escolher outra.
A amostra e as três saídas são atualizadas juntas. Nomes CSS como rebeccapurple também podem ser expandidos em valores numéricos.
Escolher a notação
HEX é compacto para tokens de design; RGB expõe os canais vermelho, verde e azul; HSL separa matiz, saturação e luminosidade. São descrições de uma cor, e não formatos de imagem diferentes.
A notação HEX abreviada também é aceita. O canal alfa pode ser informado nas sintaxes HEX, RGB ou HSL compatíveis.
#2563ebrgb(37, 99, 235)A mesma cor sRGB opaca expressa em HEX e RGB.
Transparência e precisão
O canal alfa de cores transparentes é mantido nos valores convertidos. A aparência ainda depende do fundo que estiver atrás delas.
O conversor trabalha com sRGB e arredonda a notação exibida. Não converte gamas amplas como Lab, OKLCH ou a função CSS color().
Usar o valor convertido
Os botões copiam um valor de cor, não uma declaração de propriedade completa. Use-o em color, background-color, border-color ou na definição de um token conforme necessário.
Entrada de texto de até 1 MiB. Transformações CSS e HTML são executadas em um worker com limite de 30 segundos. As ferramentas de cores usam sRGB; os estilos gerados são prévias e exigem testes no seu próprio layout.
Perguntas frequentes
Quais formatos de cor posso inserir?
Use um valor HEX, RGB ou HSL compatível, ou um nome de cor CSS. Uma sintaxe não suportada gera erro em vez de um valor convertido.
A transparência é mantida?
Sim. O alfa compatível aparece nos formatos convertidos. Confira a amostra sobre o fundo em que a cor será usada.
Por que a escrita ou a precisão da saída é diferente?
Os valores são normalizados e arredondados para exibição. A abreviação, os espaços e a representação numérica exata da entrada não são preservados.
Há suporte a OKLCH ou Display P3?
Não. Este espaço de trabalho se limita a representações sRGB e não mapeia gamas mais amplas para sRGB.
Meus valores de cor são enviados?
Não. A conversão e a prévia são locais. Copiar grava apenas a saída selecionada na área de transferência.