Color Converter Developer Tool
Convert colors between Hex, RGB, and HSL, with a live picker and preview.
Reaching for a color picker to eyeball a hex value, then hand-converting it to rgb() or hsl() for a different part of a codebase, is a common small chore. This free color converter is a developer tool that keeps Hex, RGB, and HSL in sync as you edit any one of them, with a native color picker and live preview, entirely in your browser.
Pick a color
Formats
Runs entirely in your browser — no data is sent anywhere.
Hex, RGB, and HSL are the same color, three ways
All three formats describe an identical color; they just parameterize it differently. Hex (#0d6efd) packs red, green, and blue into two hexadecimal digits each — compact, and the default format CSS tooling and design files tend to copy around. RGB (rgb(13, 110, 253)) is the same three channels written as decimal 0–255 values, which is easier to reason about or generate programmatically than hex's base-16 encoding. HSL (hsl(216, 98%, 52%)) re-parameterizes the same color as hue (a position around a 360° color wheel), saturation (how far from gray), and lightness (how far from black or white) — the format most people find intuitive for actually designing with color, since "make it darker" or "make it more muted" map directly onto adjusting one number.
Why HSL is easier to reason about than RGB
Producing a lighter or more saturated version of an RGB color means recalculating all three channels together, since brightness and color are entangled across R, G, and B. In HSL, the same adjustment is a single number: raise lightness to lighten, lower saturation to desaturate toward gray, and hue alone controls which color it is regardless of the other two. That's exactly why HSL sliders are the standard UI in most color pickers — each control does one intuitive thing — while RGB remains the format most APIs, image formats, and hardware actually operate on internally, since it maps directly onto how a screen's red/green/blue subpixels are driven.
Alpha and transparency
Any of these formats can carry a fourth alpha channel for transparency: 8-digit hex (#0d6efd80, where the last two digits are alpha), rgba(13, 110, 253, 0.5), or hsla(216, 98%, 52%, 0.5). Alpha is a separate concept from lightness — a fully opaque dark color and a semi-transparent bright color sitting over a white background can look identical, but they behave completely differently once layered over anything else, which matters when a "transparent-looking" color was actually just lightened instead.
A note on precision
Converting to HSL and back doesn't always reproduce the exact original RGB value byte-for-byte, because H/S/L are conventionally displayed and typed as whole numbers (degrees and percentages), which rounds off a small amount of precision compared to RGB's native 0–255 integers. This is normal and matches how every color picker and browser devtools panel behaves — the rounding is imperceptible visually, generally within a single unit per channel, and only shows up if you're comparing exact numeric values after a round trip through HSL.