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

HEX
#1a73e8
rgb(26, 115, 232) · hsl(214, 82%, 51%)
  • HEX#1a73e8
  • RGBrgb(26, 115, 232)
  • HSLhsl(214, 82%, 51%)
  • Red / Green / Blue26 / 115 / 232
  • Hue / Sat / Light214° / 82% / 51%
Source: Standard color-space conversions: HEX↔RGB are direct byte mappings; RGB↔HSL per the CSS Color spec.
Note — Works with sRGB colors. HSL is a cylindrical re-mapping of RGB for intuitive editing; rounding to whole degrees/percents can cause tiny round-trip differences.

Step-by-step

  1. Parse the input to RGB channels: 26, 115, 232.
  2. HEX = #1a73e8.
  3. Convert RGB→HSL: hue 214°, saturation 82%, lightness 51%.

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

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.

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

WCAG Color Contrast Checker
Calc
Color Palette Generator
Calc
Color Picker (hex / rgb / hsl / hwb)
Calc
Hex / Binary / Octal / Decimal Converter
Calc
Satoshi to Bitcoin Converter
Calc
Currency Converter
Finance