Color & Design

HEX / RGB / HSL Color Converter

Translate any color between HEX, RGB, and HSL with live sliders, an interactive picker, and copy-ready CSS strings — all calculated in your browser.

Current color

#1A73E8

rgb(26, 115, 232)

HEX or color picker

RGB channels

HSL channels

Copy as

HEX

#1A73E8

RGB

rgb(26, 115, 232)

HSL

hsl(214, 82%, 51%)

Contrast snapshot

WCAG ratio of this color against pure white and pure black backgrounds.

On white (#FFFFFF)4.51:1

On black (#000000)4.66:1

What is a Color Converter?

A color converter translates between the three formats designers and developers use every day: HEX (#RRGGBB) for stylesheets, RGB (red, green, blue 0–255) for canvases and image tooling, and HSL (hue, saturation, lightness) for intuitive editing. They all describe the same point in sRGB color space — they just trade off readability for math. This tool keeps the three in sync as you edit any of them, shows a live swatch, and reports a quick WCAG contrast snapshot so you know whether the color is safe for body text against white or black. Everything runs locally in your browser; no color is ever uploaded or logged.

How to convert a color

1
Pick a starting format
Paste a HEX value (with or without the leading #), drag the native color picker, or set RGB / HSL channels with the sliders or numeric inputs.
2
Watch the swatch update
The big swatch and HEX label update on every keystroke or slider drag, so you can see the color before committing to it.
3
Read the other two formats
Whichever format you edited, the other two are recomputed instantly in the Copy as section — HEX, rgb(...), and hsl(...) ready to paste into CSS, design tools, or code.
4
Copy the value you need
Click Copy on any row to put that string on your clipboard. The button confirms with a checkmark for 1.5 seconds.
5
Check contrast
The Contrast snapshot shows your color's WCAG ratio against pure white and pure black. If you need full WCAG AA / AAA verdicts against a custom background, jump to the Contrast Checker tool linked below.

Color conversion math

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (each channel scaled to 0–1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H depends on which channel is max:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

HEX is just RGB written in base 16 — three pairs of hex digits, one per channel, packed into a single string. HSL is a perceptual reshaping of the same RGB cube: hue (0–360°) picks a slice of the color wheel, saturation (0–100%) is how vivid versus gray it is, and lightness (0–100%) is how close to white or black it sits. The conversions above are lossless modulo rounding, so HEX ↔ RGB ↔ HSL ↔ HEX should round-trip to the same value.

Reference: CSS Color Module Level 4 — sRGB

Examples

Input	Equivalent formats
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Google blue — a popular link / primary-button shade.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) CSS named color hot pink, expressed three ways.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) A pastel green — easy to dial in by lifting the L slider.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Three-digit shorthand expands to its six-digit equivalent.

Common use cases

Translate a HEX swatch from a Figma file into rgb() or hsl() for a CSS variable
Pick a hue with the H slider, then nudge S and L to dial in a brand tint
Convert RGB values from a graphics tool or screenshot picker into the HEX your stylesheet expects
Quickly check whether a candidate brand color has enough contrast against white or black
Build a tonal scale by holding hue constant and stepping the lightness channel
Sanity-check a color name your designer mentioned against the actual HEX in code
Round-trip a 3-digit shorthand (#03A) into the canonical 6-digit form (#0033AA)

Related tools

Contrast Checker

Test any two colors for WCAG AA and AAA contrast compliance for text and UI.

Age Calculator

Calculate your exact age in years, months, and days from any date of birth.

BMI Calculator

Check body mass index from height and weight using metric or imperial units.

Percentage Calculator

Work out percentages, percentage change, and percentage of a total in seconds.

Frequently asked questions

Is my color data sent to a server?

No. All conversion math runs in your browser. Nothing you type, drag, or paste is uploaded or logged.

What's the difference between RGB and HSL?

RGB describes a color as the amount of red, green, and blue light mixed (0–255 per channel) — it's how monitors actually emit color. HSL describes the same color in terms humans reason about: hue (0–360°), saturation (0–100%), and lightness (0–100%). They round-trip losslessly, so use whichever is easier for the task: RGB for image data, HSL for editing palettes.

Why does HSL show a hue of 0 for grays?

Pure grays have zero saturation, so the hue is undefined — by convention it falls back to 0°. Sliding hue while saturation is 0 won't change the color until you raise saturation above zero.

Does this tool support alpha (transparency)?

Not yet. The current version handles fully opaque colors only — the formats covered are #RRGGBB, rgb(r, g, b), and hsl(h, s%, l%). Alpha (#RRGGBBAA, rgba(), hsla()) is on the roadmap if there's demand.

What's the difference between HSL and HSV?

HSL and HSV share the hue and saturation axes but treat the third differently: HSL's lightness is centered (50% is fully saturated, 100% is white, 0% is black), while HSV's value goes from 0 (black) to 100% (the pure hue, no white added). HSL tends to feel more natural for picking tints and shades — which is why CSS uses it.

Why might my pasted HEX get rejected?

The parser accepts 3-digit shorthand (#03A), 6-digit canonical form (#0033AA), and either form without the leading #. Anything else — 4-digit alpha, 8-digit alpha, named colors, or rgb()/hsl() strings — will flag as invalid. Drop the alpha or use a HEX with 3 or 6 hex digits.

Is HEX more accurate than RGB?

No — HEX is just RGB written in base 16, so they carry exactly the same precision (8 bits per channel, ~16.7 million colors). Browsers and design tools convert one to the other internally; pick whichever is easier to read in your context.

How do I make a color lighter or darker?

Switch to the HSL view and slide the L (lightness) channel — that's its whole purpose. Lowering L darkens, raising L lightens. Saturation can stay constant, which keeps the color's identity while shifting its tone.

Last updated 2026-04-25

What is a Color Converter?

How to convert a color

Pick a starting format

Paste a HEX value (with or without the leading #), drag the native color picker, or set RGB / HSL channels with the sliders or numeric inputs.

Watch the swatch update

The big swatch and HEX label update on every keystroke or slider drag, so you can see the color before committing to it.

Read the other two formats

Whichever format you edited, the other two are recomputed instantly in the Copy as section — HEX, rgb(...), and hsl(...) ready to paste into CSS, design tools, or code.

Copy the value you need

Click Copy on any row to put that string on your clipboard. The button confirms with a checkmark for 1.5 seconds.

Check contrast

The Contrast snapshot shows your color's WCAG ratio against pure white and pure black. If you need full WCAG AA / AAA verdicts against a custom background, jump to the Contrast Checker tool linked below.

Color conversion math

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (each channel scaled to 0–1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H depends on which channel is max:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

Examples

Input	Equivalent formats
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Google blue — a popular link / primary-button shade.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) CSS named color hot pink, expressed three ways.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) A pastel green — easy to dial in by lifting the L slider.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Three-digit shorthand expands to its six-digit equivalent.

Common use cases

Translate a HEX swatch from a Figma file into rgb() or hsl() for a CSS variable

Pick a hue with the H slider, then nudge S and L to dial in a brand tint

Convert RGB values from a graphics tool or screenshot picker into the HEX your stylesheet expects

Quickly check whether a candidate brand color has enough contrast against white or black

Build a tonal scale by holding hue constant and stepping the lightness channel

Sanity-check a color name your designer mentioned against the actual HEX in code

Round-trip a 3-digit shorthand (#03A) into the canonical 6-digit form (#0033AA)