Color Code Converter (HEX/RGB/HSL)

Convert colors between HEX, RGB, and HSL formats with live preview.

By Konstantin Iakovlev · Updated September 2026 · Source: W3C CSS Color Module Level 4 — HEX and HSL notation, HSL/sRGB conversion

Input Format
#

Color Values

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Use the Color Code Converter (HEX/RGB/HSL) above to calculate your results. Enter your values and see instant results — all calculations run in your browser.

Disclaimer: This calculator is for informational purposes only. Results are estimates based on the information you provide and the assumptions described on this page.

How It Works

Switching a color between HEX, RGB, and HSL is a routine need for designers, developers, and digital artists, and this converter moves cleanly among all three.

Each direction follows a settled algorithm. Going from HEX to RGB means reading the hexadecimal pairs and translating each into its decimal value for the red, green, and blue channels. Moving from RGB to HSL runs a short chain of calculations off the largest and smallest of the RGB values, which yields hue as an angle on the color wheel, saturation as intensity, and lightness as brightness.

Two details trip people up. HSL saturation and lightness are expressed as percentages rather than the absolute 0-to-255 scale that RGB uses, so they cannot be read interchangeably. HEX input can be the full 6-digit form, like #FF0000, or the 3-digit shorthand CSS also accepts, like #F00, which stands for #FF0000: the converter doubles each digit.

Example: Matching a Website's Brand Color

  1. 1 A web designer needs a brand's primary color, defined as HEX #3366CC, as an HSL value for a CSS animation.
  2. 2 HEX to RGB: 33 = 51, 66 = 102 and CC = 204 in decimal, so the color is rgb(51, 102, 204).
  3. 3 RGB to HSL: dividing by 255 gives 0.2, 0.4 and 0.8. Lightness = (0.8 + 0.2) / 2 = 50%. Saturation = (0.8 − 0.2) / (0.8 + 0.2) = 60%. Blue is the largest channel, so hue = 60 × (4 + (0.2 − 0.4) / 0.6) = 60 × 3.667 = 220°.
  4. 4 The converter shows #3366CC, rgb(51, 102, 204) and hsl(220, 60%, 50%) with a matching swatch. Converting hsl(220, 60%, 50%) back gives exactly rgb(51, 102, 204), so the designer can use it in CSS in place of the HEX code.

Source: W3C CSS Color Module Level 4 — HEX and HSL notation, HSL/sRGB conversion · Last updated: September 2026

Frequently Asked Questions

How do you convert HEX to RGB?
Split the 6-digit hex code into 3 pairs. Convert each pair from hexadecimal to decimal. For example, #FF5733 becomes R=255 (FF), G=87 (57), B=51 (33).
What is the difference between HEX, RGB, and HSL?
HEX uses a 6-character code (#RRGGBB), RGB specifies red/green/blue values (0-255 each), and HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). HSL is most intuitive for adjusting colors.
How do you find the HEX code for a color?
Use a color picker tool or browser dev tools (inspect element, click the color swatch). You can also use this converter to type in RGB or HSL values and get the HEX equivalent instantly.

You might also need

Password Strength Checker

Check password strength, entropy, and estimated crack time. Get suggestions for stronger passwords.

IP Subnet Calculator

Calculate network address, broadcast, usable hosts, and wildcard mask from IP and CIDR notation.

Download Time Calculator

Estimate file download time at different connection speeds. Compare across 10Mbps to 1Gbps.