Color Code Converter

Overview

Paste any colour in HEX (#ff6633), RGB (rgb(255, 102, 51)), HSL (hsl(15, 100%, 60%)), or HSV form and read the equivalent values in every other notation. Each model updates in real time when you tweak a channel, so you can dial in a colour by hue while watching the hex code change.

It's for developers and designers working across CSS, design tokens, image processing, and graphics APIs - anywhere the same colour has to be expressed in different formats. Reach for it when matching a Figma swatch to a CSS variable, picking accessible variations of a brand colour, or converting an artist's HSB pick to web-safe hex.

How it works

RGB <-> HEX is a direct byte mapping (each channel is two hex digits, #RRGGBB). RGB <-> HSL uses the colorimetry conversion documented in the CSS Color Module Level 4 spec: compute max and min of normalised R, G, B; derive lightness, saturation, and hue from their relationship. HSV (sometimes called HSB) shares the hue axis with HSL but uses value (max channel) instead of lightness, so saturation values differ between the two.

Channel precision matches the input - integer 0-255 for RGB display, two-decimal percentages for HSL/HSV - to avoid round-trip drift when you toggle between models.

Examples

• Pure red across formats:

  #ff0000
  rgb(255, 0, 0)
  hsl(0, 100%, 50%)
  hsv(0, 100%, 100%)
  

• Tailwind's slate-500:

  #64748b
  rgb(100, 116, 139)
  hsl(215, 16%, 47%)
  

• HSL to HEX via a hue shift:

  hsl(210, 50%, 40%)  ->  #336699
  

• With alpha (RGBA <-> 8-digit hex):

  rgba(255, 102, 51, 0.5)  ->  #ff663380
  

FAQ

What's the difference between HSL and HSV?

Both use hue (0-360) but differ on the second and third channels. HSL's lightness is symmetric around 50%; HSV's value tops out at the most saturated form of the colour. HSL is more common in CSS, HSV in image editors.

Does this support CSS oklch() or lab()?

This tool focuses on the sRGB family (HEX/RGB/HSL/HSV). For perceptually uniform spaces like OKLCH and CIE Lab, you'd need a colorimetry-aware converter that handles gamma and white-point correction.

How accurate is the conversion?

Round trips are lossless when staying inside sRGB - converting #abc123 to HSL and back yields the same hex. Floating-point arithmetic in the HSL step may show ~1% drift if you edit and convert repeatedly.

Can I use 3-digit hex?

Yes - #f63 expands to #ff6633 per CSS spec. The output uses the 6-digit canonical form.

Try Color Code Converter