Free Online Color Converter
Instantly convert between HEX, RGB, and HSL color formats. Type in any field and the other two update automatically — with a live color preview.
HEX
Format: #rrggbb (e.g. #3b82f6)
RGB
Format: r, g, b (0–255 each)
HSL
Format: h (0–360), s%, l%
What is a Color Code?
What is a HEX color code?
A HEX color code is a six-digit hexadecimal number prefixed with a hash symbol (e.g.#ff6347). Each pair of digits represents the red, green, and blue channel intensity from 00 (0) to ff (255). HEX codes are the most common format in web development and CSS.
What is RGB?
RGB stands for Red, Green, Blue. Each channel is an integer from 0 to 255 describing how much of that primary light color to mix. For example,rgb(255, 0, 0)is pure red. RGB is widely used in CSS, image editing software, and screen rendering.
What is HSL?
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0–360), saturation is how vivid the color is (0%–100%), and lightness controls how light or dark it appears (0%–100%). HSL is more intuitive than HEX or RGB when you want to adjust a color's brightness or vibrancy programmatically.
When should I use HEX vs RGB vs HSL?
Use HEX for design tokens and sharing colors with others — it is compact and universally recognized. Use RGB when working with canvas APIs or image processing pipelines. Use HSL in CSS when you need to create color scales programmatically (e.g. darkening a brand color by adjusting lightness), because the model maps closely to how humans perceive color.