Color Code Converter

Color conversion between HEX, RGB, and HSL involves mathematical transformations between different color models. HEX colors use hexadecimal notation (#RRGGBB) where each pair represents a color channel (Red, Green, Blue) with values from 00 to FF (0-255 in decimal). RGB is a direct numerical representation of the same three channels. HSL (Hue, Saturation, Lightness) uses a cylindrical coordinate system. Hue is an angle from 0-360 degrees on the color wheel, Saturation is a percentage indicating color purity, and Lightness indicates how bright or dark the color is. Converting RGB to HSL involves calculating the maximum and minimum channel values, then deriving hue from the channel differences. All conversions in this tool use precise mathematical formulas implemented in JavaScript, with input value clamping to prevent invalid results (e.g., RGB values are constrained to 0-255, HSL hue to 0-360). The live color preview updates instantly using CSS background-color.

1. Enter a color value in any supported format: HEX (#ff6600), RGB (255, 102, 0), or HSL (24, 100%, 50%). 2. The tool instantly converts to all other formats. 3. The live color preview shows your selected color. 4. Click on any output value to copy it to your clipboard. 5. Adjust individual channel values using the input fields. Tip: HEX shorthand notation (e.g., #f60) is automatically expanded to full form (#ff6600).

HEX: The most common format in web development. Used in CSS, design tools, and brand guidelines. Each channel ranges from 00 (none) to FF (full intensity). RGB: Additive color model where red, green, and blue light are combined. (0,0,0) is black, (255,255,255) is white. Used in digital displays and CSS rgb() function. HSL: More intuitive for designers. Hue selects the base color on the wheel, Saturation controls vibrancy (0% = gray), and Lightness controls brightness (0% = black, 100% = white). CSS supports hsl() function natively.