Color Converter Online - HEX, RGB, HSL

Color Models Explained: HEX, RGB, HSL

Screens mix three primary light colors — red, green, blue — to produce every visible color. Different formats describe the same color in different ways, each useful for different contexts.

🔴 RGB — Red, Green, Blue

rgb(255, 102, 0) — each channel is an integer 0–255 (8 bits), representing how much of that primary color to mix. rgb(0,0,0) = black (no light), rgb(255,255,255) = white (full light). RGB maps directly to hardware — it's how pixel buffers, canvas APIs, and image file formats store color data. The extended version rgba() adds an alpha channel (0–1) for transparency.

# HEX — Hexadecimal

#ff6600 is just RGB in hexadecimal: ff=255 66=102 00=0. 3-digit shorthand (#f60) expands each digit: #rgb → #rrggbb. 8-digit HEX (#rrggbbaa) includes the alpha channel — supported in all modern browsers and Tailwind CSS. HEX is the most common format in CSS, design tools (Figma, Sketch), and color pickers.

🎨 HSL — Hue, Saturation, Lightness

hsl(24, 100%, 50%) — a more intuitive model for humans:

• Hue (0–360°): the color wheel angle. 0°=red, 120°=green, 240°=blue.
• Saturation (0–100%): how vivid the color is. 0% = gray, 100% = pure color.
• Lightness (0–100%): 0% = black, 50% = normal, 100% = white.

HSL is excellent for programmatic color manipulation: generating shades and tints of a brand color is just incrementing or decrementing Lightness; creating analogous colors is rotating Hue by ±30°. CSS custom properties (variables) and design tokens often store colors in HSL for this reason.

🔎 Which Format to Use in CSS?

• Use HEX when copying from Figma/design tools or writing static color values.
• Use HSL in design systems and CSS variables — easy to create consistent tint/shade scales.
• Use RGB / rgba() when you need to manipulate alpha programmatically or blend with Canvas API.
• Consider oklch() (CSS Color Level 4) for perceptually uniform color manipulation — it's now supported in all modern browsers and produces more predictable results than HSL.

All conversions run locally in your browser.