What is the difference between RGB and HSL?

RGB defines colors by mixing red, green, and blue light intensities (0–255 each). HSL defines colors by hue (color wheel angle), saturation (vividness), and lightness (brightness). HSL is more intuitive for humans; RGB maps directly to screen hardware.

How do I convert hex to RGB?

Split the 6-digit hex code into 3 pairs of 2 digits. Convert each pair from hexadecimal to decimal. #FF6600 → FF=255, 66=102, 00=0 → RGB(255, 102, 0).

What does the H in HSL represent?

H is hue, measured as an angle on the color wheel from 0° to 360°. Red=0°, Yellow=60°, Green=120°, Cyan=180°, Blue=240°, Magenta=300°. Adding 180° to any hue gives its complementary color.

Can I use HSL in CSS?

Yes. CSS supports hsl(hue, saturation%, lightness%) and hsla() with an alpha channel. Modern CSS also supports the newer hsl() with space-separated values and optional alpha: hsl(24 100% 50% / 80%).

What is color #000000?

#000000 is pure black (RGB 0, 0, 0). #FFFFFF is pure white (RGB 255, 255, 255). #808080 is medium gray. #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue.

How do I make a color lighter or darker?

In HSL, increase lightness (L) to lighten and decrease L to darken, without changing the hue or saturation. In RGB, this is harder because you need to adjust all three channels proportionally. HSL is superior for this task.

Color Converter

Convert colors between Hex, RGB, and HSL formats. Enter any color format and see all equivalents with a live preview swatch.

Hex Colore.g. #FF6600

Hex

#FF6600

RGB

rgb(255, 102, 0)

HSL

hsl(24°, 100%, 50%)

Planning notes, formulas, and examples

About the Color Converter

The Color Converter translates between the three most common CSS color formats: Hexadecimal (#RRGGBB), RGB (red, green, blue values 0–255), and HSL (hue, saturation, lightness). Enter a color in any format and review all three representations, along with a live color preview swatch.

Web developers and designers constantly switch between color formats. Hex codes are compact for CSS. RGB values are intuitive for programmatic color manipulation. HSL is ideal for creating color palettes because adjusting hue, saturation, or lightness independently is straightforward. Having a converter that handles all three eliminates manual math.

This converter supports standard 6-digit hex codes (with or without the # prefix), RGB triplets (0–255 per channel), and HSL values (hue 0–360°, saturation and lightness 0–100%). It's perfect for CSS development, design systems, and brand color management.

When This Page Helps

Designers and developers need to convert between color formats for CSS, design tools, and programmatic color generation. This converter handles Hex, RGB, and HSL with a live preview.

How to Use the Inputs

Enter a hex color code (e.g., #FF6600) in the hex input field.
Or enter RGB values (0–255) for red, green, and blue channels.
View the equivalent values in all three formats.
Check the live preview swatch to visually confirm the color.
Copy the format you need for your CSS, design tool, or code.

Formula used

Hex to RGB: R = parseInt(hex[0..1], 16), G = parseInt(hex[2..3], 16), B = parseInt(hex[4..5], 16)
RGB to HSL: Normalize R,G,B to 0–1. H is based on which channel is max. S = (max-min)/(1-|2L-1|). L = (max+min)/2.
HSL to RGB: Calculate chroma C = (1-|2L-1|) × S, then derive R,G,B from H sector.

Example Calculation

Result: RGB(255, 102, 0) / HSL(24°, 100%, 50%)

#FF6600: R=0xFF=255, G=0x66=102, B=0x00=0. HSL: H=24° (orange hue), S=100% (fully saturated), L=50% (medium lightness). This is a vivid orange color.

Tips & Best Practices

HSL is best for creating harmonious color palettes — rotate hue by 30° for analogous colors or 180° for complementary.
To darken a color, reduce L in HSL. To desaturate, reduce S.
CSS supports all three: #FF6600, rgb(255, 102, 0), hsl(24, 100%, 50%).
For transparency, use rgba() or hsla() with a fourth alpha channel value.
Hex shorthand #F60 expands to #FF6600.

Color Models in Web Development

Hex, RGB, and HSL are the three primary color models in CSS. Hex is the most compact (#RRGGBB), RGB is the most direct representation of screen pixels, and HSL provides the most intuitive control for color manipulation. All three produce identical results — they are just different ways to describe the same color.

Building Color Palettes with HSL

HSL makes palette creation systematic. Start with a base hue, then create variations by adjusting saturation and lightness. Analogous colors differ by 30° in hue. Complementary colors are 180° apart. Triadic colors are 120° apart. This geometric approach on the color wheel produces harmonious palettes.

Accessibility and Color Contrast

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. When converting colors, check contrast ratios to ensure accessibility. Tools that show the relative luminance of a color (derived from RGB) help verify compliance.

Sources & Methodology

Last updated: February 8, 2026

Frequently Asked Questions

RGB defines colors by mixing red, green, and blue light intensities (0–255 each). HSL defines colors by hue (color wheel angle), saturation (vividness), and lightness (brightness). HSL is more intuitive for humans; RGB maps directly to screen hardware.