Color Code Generator

Understanding Color Codes: HEX, RGB & HSL

Color codes are essential for web design, graphic design, and digital art. Three of the most common formats are HEX, RGB, and HSL. Each represents colors in a different way, and being able to convert between them gives you flexibility. Our tool instantly converts any color you pick into all three formats, with copy buttons for easy use in your CSS or design software.

🧮 Conversion Formulas

• HEX → RGB: Split the 6‑digit hex into pairs (RR, GG, BB). Convert each pair from base‑16 to decimal. Example: #3b82f6 → 3B=59, 82=130, F6=246 → rgb(59,130,246).
• RGB → HEX: Convert each decimal value to a two‑digit hexadecimal (pad with leading zero if needed) and concatenate with a #. Example: rgb(59,130,246) → 59=3B, 130=82, 246=F6 → #3b82f6.
• RGB → HSL: Normalize R,G,B to 0‑1, find min, max, delta. Hue is calculated from the dominant channel, saturation from delta and lightness, lightness = (max+min)/2. (Our script implements this exactly.)
• HSL → RGB: Uses chroma, hue sector, and lightness to compute R,G,B. The math ensures accurate conversion back to RGB.

🎯 Why Different Formats?

• HEX is compact and widely used in CSS and HTML.
• RGB is based on how screens emit light; it’s great for programmatic color manipulation.
• HSL is more human‑readable – you can easily make a color lighter/darker by adjusting lightness, or change its vividness by altering saturation.

❓ Frequently Asked Questions