Conversor de Cores HEX ↔ RGB

As cores HEX são 3 pares de dígitos hexadecimais representando os canais Red, Green, Blue. #RRGGBB. Cada par é um número base-16 (0–FF = 0–255 em decimal). Conversão: divida hex em pares, converta cada um de base 16 para base 10. Exemplo: #1A2B3C → R=0x1A=26, G=0x2B=43, B=0x3C=60 → rgb(26, 43, 60). Hex curto #RGB: cada dígito é duplicado. #F3A → #FF33AA → rgb(255, 51, 170). CSS aceita ambas as formas: #FF33AA e #F3A são idênticos. Programaticamente: parseInt("1A", 16) = 26.

HSL significa Hue, Saturation, Lightness — um modelo de cor mais intuitivo que RGB. Hue: 0–360 graus em uma roda de cores. 0/360=vermelho, 60=amarelo, 120=verde, 180=ciano, 240=azul, 300=magenta. Saturation: 0–100%. 0% = cinza, 100% = totalmente saturado (cor vívida). Lightness: 0–100%. 0% = preto, 100% = branco, 50% = cor pura. CSS: hsl(240, 100%, 50%) = azul puro. Vantagem sobre RGB: você pode intuitivamente criar variações — para clarear uma cor, aumente lightness. Para fazer um pastel, reduza saturação. Para girar hue, adicione/subtraia graus. Usado em sistemas de design para gerar paletas de cores.

HSV (Hue, Saturation, Value) também é chamado HSB (Hue, Saturation, Brightness). Semelhante a HSL mas diferente: Value/Brightness: 0=preto, 100%=totalmente brilhante (cor pura ou branco dependendo da saturação). HSV vs HSL: Em HSL, 100% lightness é sempre branco independentemente da saturação. Em HSV, 100% value com 0% saturação é branco, com 100% saturação é o matiz puro. HSV é o modelo usado pela maioria dos seletores de cor em ferramentas de design (Photoshop, Figma, etc.). É mais natural para selecionar cores: escolha o hue, depois escolha saturação e brilho em um quadrado 2D.

Alpha adiciona transparência às cores. Intervalo: 0 (totalmente transparente) a 1 (totalmente opaco). Formatos CSS com alpha: rgba(255, 100, 50, 0.5) — 50% transparente. hsla(120, 60%, 50%, 0.8) — 20% transparente. Hex com alpha: #RRGGBBAA (hex de 8 dígitos). #FF000080 = vermelho em ~50% opacidade (0x80 = 128 = 128/255 ≈ 0.5). Curto: #RGBA (4 dígitos). #FF08 = vermelho em ~53% opacidade. CSS moderno: color(display-p3 1 0 0 / 0.5) para wide-gamut. A propriedade CSS opacity vs alpha: opacity afeta o elemento inteiro e seus filhos; alpha color afeta apenas essa propriedade específica. opacity: 0.5 em uma div com texto torna tanto o fundo quanto o texto transparentes; background-color: rgba(0,0,0,0.5) afeta apenas o fundo.

CSS tem 140+ cores nomeadas. Bem conhecidas: red, blue, green, white, black, gray, orange, purple, pink, cyan. Algumas com nomes divertidos: rebeccapurple (#663399, adicionada em homenagem à filha do autor de spec CSS Eric Meyer), cornflowerblue (#6495ED), papayawhip (#FFEFD5), lawngreen (#7CFC00). Quando usar: Cores nomeadas são boas para prototipagem rápida. Para produção: use HEX ou HSL para consistência e compatibilidade de ferramentas. HSL é melhor para sistemas de design — você pode gerar variantes de paleta programaticamente: hsl(210, 80%, 20%/30%/40%/50%/60%) para uma escala azul. Evite cores nomeadas em tokens de design pois elas escondem os valores reais.