🎨 Conversor de Cores – HEX, RGB, HSL com preview
Converta cores entre os principais formatos usados em design gráfico, desenvolvimento web e impressão. Basta digitar a cor em HEX (#RRGGBB), RGB (rgb(0,0,0)) ou HSL (hsl(0,0%,0%)) – nossa ferramenta reconhece automaticamente e mostra os valores equivalentes.
<input type="color">).
🌈 Entenda os formatos de cor
- HEX: Código hexadecimal de 6 dígitos, muito usado em CSS e HTML (ex:
#FF5733). - RGB: Valores de vermelho, verde e azul de 0 a 255 (ex:
rgb(255, 87, 51)). - HSL: Matiz (0–360°), Saturação (0–100%), Luminosidade (0–100%) – ideal para criar variações de cor (ex:
hsl(11, 100%, 60%)).
📌 Exemplos práticos
- Converter a cor vermelho puro:
#FF0000→rgb(255,0,0)→hsl(0,100%,50%). - Azul royal:
#4169E1→rgb(65,105,225)→hsl(225, 73%, 57%). - Verde claro:
hsl(120, 80%, 70%)→#a5f0a5~rgb(165,240,165).
🔄 Como fazer a conversão manualmente?
HEX → RGB: Separe os pares de dígitos (RR, GG, BB) e converta de hexadecimal para decimal.
RGB → HEX: Converta cada componente decimal para hexadecimal (2 dígitos) e concatene com #.
RGB → HSL: Use a fórmula que normaliza os valores de R,G,B e calcula matiz, saturação e luminosidade.
Nossa ferramenta faz tudo instantaneamente para você.
💡 Quando usar cada formato?
- HEX: mais compacto, ótimo para CSS e imagens.
- RGB: fácil de relacionar com monitores e edição de imagem.
- HSL: intuitivo para criar paletas (ex: mudar apenas o matiz).
❓ Perguntas frequentes sobre cores
P: O que significa o símbolo # no HEX?
R: Indica que o valor está em hexadecimal. Não é parte do número.
P: Como usar HSL para clarear ou escurecer uma cor?
R: Aumente ou diminua o valor da luminosidade (L). Por exemplo, hsl(240, 100%, 50%) é azul puro; com L=70% vira azul claro.
P: Posso usar cores com canal alfa (transparência)?
R: Esta versão suporta apenas cores opacas. RGBA e HSLA serão incluídos em breve.