Hex / RGB / HSL Color Converter

Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.

Inputs

Enter HEX (#1a73e8), rgb(26,115,232), or hsl(214,82%,51%).

Result

Loading calculator…
—

How to use this calculator

  • Enter a color in HEX, rgb(), or hsl() format.
  • Read the equivalent HEX, RGB, and HSL values.
  • Use the channel breakdown to tweak individual components.
  • Copy the CSS-ready string you need into your stylesheet.

About this calculator

Web colors are written in several formats, and converting between them is a constant need in design and front-end work. This converter accepts a color in HEX (#1a73e8), RGB (rgb(26, 115, 232)), or HSL (hsl(214, 82%, 51%)) and returns all three, plus the individual channel values. HEX and RGB are two ways of writing the same thing — the red, green, and blue intensities from 0 to 255 — so converting between them is a direct base-16 mapping. HSL (hue, saturation, lightness) is a cylindrical re-mapping of the RGB cube designed to be more intuitive for humans: hue is the angle on the color wheel (0–360°), saturation is how vivid the color is, and lightness is how bright. HSL is especially handy for generating variations of a color by nudging one channel. All conversions use the standard CSS Color definitions in the sRGB space.

How it works — the formula

HEX↔RGB: each pair = channel value (base 16 ↔ base 10) RGB→HSL: L=(max+min)/2; S from chroma; H from which channel is max

HEX and RGB are equivalent integer encodings; HSL is derived from the max/min of the normalized channels.

Source: MDN — CSS color value

Worked examples

Example 1
#ff0000
Inputs:
color=#ff0000
Output:
rgb(255,0,0), hsl(0,100%,50%)
Example 2
#1a73e8
Inputs:
color=#1a73e8
Output:
rgb(26,115,232), hsl(214,82%,51%)
Example 3
rgb(26,115,232)
Inputs:
color=rgb(26,115,232)
Output:
#1a73e8

Limitations

  • sRGB opaque colors; alpha not composited.
  • HSL rounded to whole units for readability.
  • Named colors (e.g. "tomato") not parsed — use HEX/RGB/HSL.

Standard CSS sRGB conversions.

Frequently asked

How do I convert HEX to RGB?+
Split the six-digit hex into three pairs and convert each from base-16 to decimal: #1a73e8 → 1a=26, 73=115, e8=232, giving rgb(26, 115, 232). Three-digit hex like #abc expands to #aabbcc first.
What is HSL and why use it?+
HSL stands for hue, saturation, lightness. Hue is the color’s angle on the wheel (0–360°), saturation its vividness, and lightness its brightness. It is intuitive for adjusting colors — e.g. lowering lightness to darken a shade — which is harder to reason about in raw RGB.
Are HEX and RGB the same thing?+
Essentially yes — both express red, green, and blue from 0 to 255. HEX is a compact base-16 notation (#rrggbb) while RGB is decimal. They convert directly with no loss.
Why might a color not round-trip exactly?+
HSL values are usually rounded to whole degrees and percents for readability. Converting RGB→HSL→RGB can therefore land a unit off due to that rounding. Keeping more decimal places preserves exactness.
Does this handle alpha/transparency?+
This converter focuses on the opaque RGB/HSL/HEX channels. For transparency, append an alpha: rgba(), hsla(), or an 8-digit hex (#rrggbbaa). The color channels convert the same way regardless of alpha.
What color space does this use?+
sRGB, the standard color space for the web. Newer CSS color spaces (like display-p3 or oklch) cover wider gamuts; this tool targets the conventional sRGB HEX/RGB/HSL trio used in most stylesheets.

Related calculators

WCAG Color Contrast Checker
Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.
Color Palette Generator
Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.
Tip Split Calculator
Compute tip and split a restaurant bill evenly among diners.
Fuel vs Electric Car Cost Comparison
Annual fuel cost (gas car) vs annual electricity cost (EV) for the same mileage.
EV Charging Cost Calculator
Cost per session: kWh delivered × $/kWh, accounting for charger efficiency.
Solar Panel Payback Period
System cost / annual savings = years to break even on a residential solar install.

More tools you might like

Hand-picked tools that pair well with this one — same audience, same intent.

WCAG Color Contrast Checker
Calc

Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.

Color Palette Generator
Calc

Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.

Color Picker (hex / rgb / hsl / hwb)
Calc

Convert a color between hex, RGB, HSL, HWB, and CMYK. Reports relative luminance and WCAG 2.2 contrast ratio against white and black.

Hex / Binary / Octal / Decimal Converter
Calc

Convert numbers between hexadecimal, binary, octal, and decimal. Shows the bit pattern grouped by nibble + the two’s-complement representation for negative values.

Satoshi to Bitcoin Converter
Calc

Convert between satoshis and bitcoin (1 BTC = 100,000,000 sats) and optionally value either in US dollars at a given BTC price.

Currency Converter
Finance

Convert between 30 major world currencies using a snapshotted static rate table — clearly marked, not live.