Calculadora de Hex para HSL

• Conversão bidirecional instantânea: a calculadora atualiza todos os equivalentes de formato a cada tecla digitada - sem apertar nenhum botão. Altere qualquer entrada (HEX, RGB ou HSL) e todos os outros valores são atualizados na hora. Também há um seletor de cor nativo para seleção visual.
• Todos os formatos em um só lugar: a calculadora gera HEX, HEX3 (abreviado), RGB, RGBA, HSL, HSLA e os valores individuais dos canais H/S/L/V - tudo o que um desenvolvedor precisa em uma única tela. Copie qualquer valor individual ou todos os valores de uma vez.
• 100 % privado - sem envio: toda a conversão acontece localmente no seu navegador. Seus valores de cor nunca saem do seu dispositivo e nunca são enviados a nenhum servidor - seguro para projetos de clientes e sistemas de design proprietários.
• Grátis e sem limites: converta cores ilimitadas sem cadastro, sem assinatura e sem limite de uso. A calculadora de Hex para HSL é totalmente grátis para sempre e sem anúncios bloqueando a interface.

• Desenvolvimento CSS: desenvolvedores frontend usam a calculadora para converter tokens de design de HEX para HSL em propriedades personalizadas do CSS. O HSL é preferido em CSS porque é fácil ajustar a luminosidade e a saturação de forma programática.
• Configuração do Tailwind CSS: desenvolvedores usam a calculadora para converter cores de marca de HEX para HSL na configuração do Tailwind CSS. O Tailwind v3+ usa variáveis CSS baseadas em HSL para seu sistema de cores.
• Entrega de design: desenvolvedores usam a calculadora para converter valores HEX de designs no Figma para o formato RGB ou HSL exigido pelo seu framework CSS ou sistema de tokens de design.
• Acessibilidade e contraste: especialistas em acessibilidade usam a calculadora para entender o valor de luminosidade (L) de uma cor, fator-chave nos cálculos de razão de contraste e na adaptação ao modo escuro.
• Ajuste de paleta de cores: designers usam a calculadora para encontrar os valores HSL de cores de marca existentes e assim criar tons e sombras consistentes ajustando apenas o canal de luminosidade.
• Desenvolvimento multiplataforma: desenvolvedores móveis e multiplataforma usam a calculadora para converter cores HEX da web em valores RGB para React Native, Flutter e outros frameworks que usam modelos de cor RGB.

A calculadora de Hex para HSL converte valores de cor entre os três formatos de cor CSS mais comuns - HEX, RGB e HSL - instantaneamente e de forma bidirecional. Insira uma cor em qualquer formato e obtenha imediatamente todos os valores equivalentes. A ferramenta também gera os valores individuais de cada canal (H, S, L, R, G, B) e os valores HSV, o que a torna uma referência completa de formatos de cor para desenvolvedores e designers.

1. Insira uma cor em qualquer formato: digite um valor HEX (por exemplo, #ff6b6b), um valor RGB (por exemplo, 255, 107, 107) ou um valor HSL (por exemplo, 0, 100%, 71%). Você também pode usar a amostra do seletor de cor nativo. Todo o processamento roda localmente no seu navegador - seus valores de cor nunca saem do seu dispositivo.
2. Todos os formatos são atualizados na hora: conforme você digita, todos os outros campos de formato são atualizados em tempo real. A amostra de cor mostra uma prévia ao vivo da cor. Troque o modo de entrada ativo para editar outro formato.
3. Copie qualquer valor: clique no botão Copiar ao lado de qualquer linha de saída para copiar aquele valor específico, ou use "Copiar todos os valores" para copiar HEX, RGB e HSL juntos.

• HEX: o formato mais comum para cores na web. Compacto e universalmente suportado. Use HEX ao copiar cores de ferramentas de design como o Figma ou ao especificar cores em atributos HTML.
• RGB: especifica os canais vermelho, verde e azul (0-255). Use RGB ao trabalhar com APIs de canvas, React Native, Flutter ou qualquer plataforma que exija valores numéricos de canal.
• HSL: especifica matiz (0-360°), saturação (0-100 %) e luminosidade (0-100 %). O HSL é o formato mais intuitivo para designers - ajustar apenas a luminosidade cria tons e sombras consistentes. É preferido para propriedades personalizadas do CSS e sistemas de tokens de design.
• HSV: semelhante ao HSL, mas usa valor/brilho em vez de luminosidade. O HSV é usado no Photoshop, no seletor de cores do Figma e na maioria dos aplicativos de design. A calculadora de Hex para HSL também gera valores HSV para compatibilidade entre ferramentas.

O HSL é cada vez mais preferido para sistemas de design em CSS porque torna a manipulação de cores previsível. Para criar uma versão mais clara de uma cor, basta aumentar o valor L. Para criar uma versão mais escura, diminua-o. Isso torna o HSL ideal para gerar escalas de tons e sombras, variantes de modo escuro e estados hover de forma programática. O Tailwind CSS v3+ usa variáveis CSS baseadas em HSL exatamente por esse motivo. Nossa calculadora de Hex para HSL facilita converter qualquer cor HEX existente em HSL para usar no seu sistema de tokens de design.