HesapHanem

Color Converter (HEX → RGB / HSL)

How do I convert HEX to RGB?

How it is calculated

The tool accepts a 3-digit or 6-digit hex code, with or without a leading #, in upper or lower case. A 3-digit code is expanded by doubling each digit (F80 becomes FF8800). Each pair of digits is read as a base-16 number from 0 to 255, giving red, green and blue.

For HSL the channels are scaled to 0–1. Lightness is L = (max + min) / 2. If max equals min the colour is grey, with hue and saturation 0. Otherwise saturation is (max − min) / (max + min) for L up to 0.5 or (max − min) / (2 − max − min) above it, and hue is an angle in degrees from the dominant channel. Hue, saturation and lightness are rounded to whole numbers. Anything that is not 3 or 6 hex digits, including 8-digit codes with alpha, shows as invalid.

Worked example

Enter 336699. The pairs are 33, 66 and 99, which are 51, 102 and 153 in decimal, so the RGB is rgb(51, 102, 153). Scaled to 0–1 the channels are 0.2, 0.4 and 0.6. Lightness is (0.6 + 0.2) / 2 = 0.4, so 40%. Saturation is 0.4 / 0.8 = 0.5, so 50%. Blue is the largest channel, so hue is ((0.2 − 0.4) / 0.4 + 4) × 60 = 210. The result is hsl(210, 50%, 40%), and the hex is shown normalised as #336699.

Try this example →

Common mistakes

  • Typing an 8-digit hex with an alpha channel, such as #33669980. Only 3 or 6 digits are accepted, so remove the last two before converting.
  • Entering a 4- or 5-digit code by mistake. A missing digit is not guessed; the tool reports invalid input.
  • Reading #F80 as #0F8000. Short codes double each digit, so it means #FF8800.
  • Expecting the HSL to hold decimals. Values are rounded, so converting back from the rounded HSL can land one step off the original hex.
  • Pasting the colour name or an rgb() text instead of a hex code.

About this calculator

This tool converts a HEX color code like #1e6bff into its RGB (red, green, blue channel values from 0–255) and HSL (hue, saturation, lightness) equivalents, three different ways of describing the exact same color that different tools and file formats expect. HEX is the compact format most common in CSS and design files, RGB maps directly to how screens mix light, and HSL is often easier for humans to reason about since adjusting lightness or saturation alone doesn't require recalculating three separate channel values.

It is used by web developers and designers pulling a color from a mockup, brand guideline or image and needing it in a different format for their CSS or codebase, and by anyone fine-tuning a color's brightness or saturation who finds it easier to think in HSL terms than to guess at HEX digits. Design tools like Figma and browser dev-tools color pickers do this same conversion behind the scenes every time they show you a color in more than one format.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    HSL is the easiest form for adjusting a colour by hand: keep the hue, then nudge lightness up or down to get a hover shade or a lighter background without guessing at new hex pairs. The tool rounds hue, saturation and lightness to whole numbers, so converting back may differ from the original by a step. It reads only 3 or 6 digit codes, with no alpha channel. Which colour formats would you like it to accept?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators