Color Code Conversion: HEX, RGB, HSL Explained

Colors on the web can be represented in multiple formats. Let's explore each one.

HEX Colors

HEX colors use hexadecimal values:

• Format: #RRGGBB or #RGB
• Range: 00-FF for each channel

Examples:

• #FF0000 = Red
• #00FF00 = Green
• #0000FF = Blue
• #FFF = White (shorthand)

RGB Colors

RGB uses Red, Green, Blue values:

• Format: rgb(r, g, b) or rgba(r, g, b, a)
• Range: 0-255 for each channel
• Alpha: 0-1 for transparency

Examples:

• rgb(255, 0, 0) = Red
• rgba(0, 0, 0, 0.5) = 50% transparent black

HSL Colors

HSL uses Hue, Saturation, Lightness:

• Hue: 0-360 (color wheel degree)
• Saturation: 0-100%
• Lightness: 0-100%

Examples:

• hsl(0, 100%, 50%) = Red
• hsl(120, 100%, 50%) = Green
• hsl(240, 100%, 50%) = Blue

Color Wheel (Hue Values)

• 0° = Red
• 60° = Yellow
• 120° = Green
• 180° = Cyan
• 240° = Blue
• 300° = Magenta

Conversion Formulas

HEX to RGB

const hex = "#FF5733";

const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);

When to Use Each

• HEX: CSS, design tools, compact notation
• RGB: When you need alpha transparency
• HSL: When adjusting colors programmatically

Use our Color Converter to easily switch between formats.