Color Converter

HEX, RGB and HSL describe exactly the same colours; they just disagree about which numbers are worth showing you. The converter above takes any hex value and gives you all three at once, plus a live swatch, so you can move between a design file, a stylesheet and a colour picker without guessing.

How it works

Type a hex value or use the native colour picker next to the field. The input is forgiving in the ways that matter:

• The leading # is optional — ff0000 and #ff0000 both work.
• Three-digit shorthand is expanded, so #f00 gives the same result as #ff0000.
• Case is irrelevant; the canonical output is lowercase six-digit hex.

Anything else — a named colour, a malformed four-character value, a non-hex character — is rejected with a short message rather than silently coerced to black. Each of the three outputs has its own copy button, so you can paste rgb(59, 130, 246) straight into a stylesheet or hsl(217, 91%, 60%) into a design token file.

Conversion is exact in one direction and rounded in the other. Hex to RGB is a lossless base-16 read of three bytes. RGB to HSL involves division, and the hue, saturation and lightness are rounded to whole numbers for readability — so round-tripping HSL back to hex can land one or two units away on a channel. If you need byte-exact values, keep hex as the source of truth.

Which notation to use when

HEX is compact and unambiguous, which is why it dominates design handoffs and stylesheets. It is also unreadable: nothing about #3b82f6 tells you it is a mid-brightness blue, and nothing tells you how it relates to #2563eb.

RGB exposes the three channels directly. It is the right notation when you are manipulating channels programmatically — compositing, channel swaps, generating an image — and it is the form the canvas and image APIs actually work in.

HSL is the one to reach for when you are designing rather than transcribing. Hue is an angle on the colour wheel (0 red, 120 green, 240 blue), saturation is how much colour there is, lightness runs from black at 0% to white at 100%. Building a palette is then mechanical: hold hue and saturation, vary lightness, and you have a consistent set of shades. Changing hue alone gives you a matching accent. Doing the same by hand in hex means arithmetic in base 16 on three coupled numbers.

CSS accepts all three, plus modern space-separated and alpha forms — rgb(59 130 246 / 50%). Those are equivalent to the comma forms this tool emits; use whichever your codebase already uses rather than mixing them. HTML5 essentials covers where colour values sit in the document and styling model, and JavaScript fundamentals is the place to start if you are computing these values at runtime rather than writing them by hand.

Things worth knowing

HSL lightness is not perceived brightness. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) claim the same lightness and look nothing alike — the eye is far more sensitive to green than to blue. This is why you cannot judge accessibility from HSL, and why the contrast checker computes a weighted relative luminance instead.

Opacity is not part of this conversion. The tool handles opaque colours; eight-digit hex with an alpha channel is not accepted. Keep alpha separate — it is a compositing instruction, not a property of the colour.

Hex is sRGB. Wider-gamut notations such as oklch() and color(display-p3 ...) can express colours that have no hex equivalent at all. If a value came out of a wide-gamut design tool, converting it to hex clips it.