Color Converter - HEX to RGB to HSL Converter Free

What is Color Converter & Picker?

A colour converter translates colour values between different formats used in web development and design: HEX (hexadecimal), RGB (Red, Green, Blue), and HSL (Hue, Saturation, Lightness). Designers and developers constantly need to switch between these formats for CSS, design tools, and brand guidelines. Our tool goes beyond basic conversion. It includes a visual colour picker, WCAG accessibility contrast checking against white and black backgrounds, generated colour palettes (complementary, triadic, analogous, and shades), and one-click CSS code copying.

How It Works

Enter a colour value in any format (HEX, RGB, or HSL) or use the colour picker. All three formats update in real time. The WCAG section shows contrast ratios against white and black backgrounds with pass/fail indicators for AA and AAA levels. The palette section generates related colours based on colour theory. Click any palette swatch to set it as the active colour.

Formula

HEX to RGB: Parse hex pairs → convert to decimal (0-255)
RGB to HSL: Normalize to 0-1 → calculate hue from max channel → saturation from chroma → lightness from average of max and min
HSL to RGB: Calculate chroma from saturation and lightness → map hue to RGB channels

Formula Explained

HEX is base-16 representation of RGB values. Each pair of hex digits maps to one RGB channel (00-FF → 0-255). HSL conversion uses the standard sRGB colour space formulas. Hue is determined by which RGB channel is dominant, saturation by the difference between the strongest and weakest channels, and lightness by the average of the strongest and weakest. WCAG contrast uses relative luminance: L = 0.2126R + 0.7152G + 0.0722B (with gamma correction).

Example

HEX: #3B82F6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%) Contrast vs white: 3.44:1 (AA Large: Pass, AA: Fail) Contrast vs black: 6.11:1 (AA: Pass, AAA Large: Pass) Complementary: hsl(37, 91%, 60%) = #F6A83B Triadic: hsl(337, 91%, 60%) and hsl(97, 91%, 60%)

Tips & Best Practices

✓Use WCAG contrast checking to ensure your text colours are accessible.
✓HSL is the most intuitive format for adjusting colours — change lightness for shades.
✓Use complementary colours for call-to-action buttons against your primary colour.
✓Save your brand colours by bookmarking the URL with your hex code.
✓For dark mode, increase lightness (L in HSL) by 20-30% while keeping hue and saturation.

Common Use Cases

•Converting brand colours between HEX, RGB, and HSL for CSS
•Checking colour accessibility compliance for WCAG standards
•Generating harmonious colour palettes for web design
•Finding complementary and triadic colours for UI design
•Creating consistent colour shades for design systems

Frequently Asked Questions

A HEX colour code like #3B82F6 represents three pairs of hexadecimal digits for Red, Green, and Blue. Convert each pair to decimal: 3B = 59 (Red), 82 = 130 (Green), F6 = 246 (Blue). So #3B82F6 = rgb(59, 130, 246). Our converter does this instantly.

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the colour wheel (0-360°), Saturation is the intensity (0-100%), and Lightness is how light or dark the colour is (0-100%). HSL is often more intuitive than RGB for choosing colours because you can easily adjust brightness and saturation independently.

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in brightness between foreground and background colours. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Our tool checks both levels automatically.

Complementary colours sit opposite each other on the colour wheel (180° apart in HSL). They create maximum contrast and visual impact when used together. For example, blue (#3B82F6) and orange are complementary. Triadic colours are 120° apart, and analogous colours are 30° apart.

Yes. All colour conversions happen locally in your browser. No data is sent to any server.

Color Converter & Picker