HEX ↔ RGB Color Converter

HEX colors are 3 pairs of hexadecimal digits representing Red, Green, Blue channels. #RRGGBB. Each pair is a base-16 number (0–FF = 0–255 in decimal). Conversion: split hex into pairs, convert each from base 16 to base 10. Example: #1A2B3C → R=0x1A=26, G=0x2B=43, B=0x3C=60 → rgb(26, 43, 60). Short hex #RGB: each digit is doubled. #F3A → #FF33AA → rgb(255, 51, 170). CSS accepts both forms: #FF33AA and #F3A are identical. Programmatically: parseInt("1A", 16) = 26.

HSL stands for Hue, Saturation, Lightness — a more intuitive color model than RGB. Hue: 0–360 degrees on a color wheel. 0/360=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta. Saturation: 0–100%. 0% = gray, 100% = fully saturated (vivid color). Lightness: 0–100%. 0% = black, 100% = white, 50% = pure color. CSS: hsl(240, 100%, 50%) = pure blue. Advantage over RGB: you can intuitively create variations — to lighten a color, increase lightness. To make a pastel, reduce saturation. To rotate hue, add/subtract degrees. Used in design systems for generating color palettes.

HSV (Hue, Saturation, Value) is also called HSB (Hue, Saturation, Brightness). Similar to HSL but different: Value/Brightness: 0=black, 100%=fully bright (pure color or white depending on saturation). HSV vs HSL: In HSL, 100% lightness is always white regardless of saturation. In HSV, 100% value with 0% saturation is white, with 100% saturation is the pure hue. HSV is the model used by most color pickers in design tools (Photoshop, Figma, etc.). It's more natural for selecting colors: pick the hue, then choose saturation and brightness on a 2D square.

Alpha adds transparency to colors. Range: 0 (fully transparent) to 1 (fully opaque). CSS formats with alpha: rgba(255, 100, 50, 0.5) — 50% transparent. hsla(120, 60%, 50%, 0.8) — 20% transparent. Hex with alpha: #RRGGBBAA (8-digit hex). #FF000080 = red at ~50% opacity (0x80 = 128 = 128/255 ≈ 0.5). Short: #RGBA (4-digit). #FF08 = red at ~53% opacity. Modern CSS: color(display-p3 1 0 0 / 0.5) for wide-gamut. The opacity CSS property vs alpha: opacity affects the entire element and its children; alpha color affects only that specific property. opacity: 0.5 on a div with text makes both background and text transparent; background-color: rgba(0,0,0,0.5) only affects the background.

CSS has 140+ named colors. Well-known: red, blue, green, white, black, gray, orange, purple, pink, cyan. Some with fun names: rebeccapurple (#663399, added in honor of CSS spec author Eric Meyer's daughter), cornflowerblue (#6495ED), papayawhip (#FFEFD5), lawngreen (#7CFC00). When to use: Named colors are fine for quick prototyping. For production: use HEX or HSL for consistency and tooling compatibility. HSL is best for design systems — you can generate palette variants programmatically: hsl(210, 80%, 20%/30%/40%/50%/60%) for a blue scale. Avoid named colors in design tokens as they hide the actual values.