Color Converter — HEX, RGB, HSL and HSV

What a color converter actually does

A color converter takes a single color and rewrites it in every notation the web understands: HEX, RGB, RGBA, HSL and HSLA. The color itself never changes; only the way it is described changes. #3498db, rgb(52, 152, 219) and hsl(204, 70%, 53%) are three spellings of the exact same blue, and a good converter lets you paste any one of them and instantly read off the other three.

This matters because different parts of a workflow prefer different formats. A designer picking a color in Figma usually sees HEX. A developer tweaking opacity in CSS reaches for RGBA. Someone building a theme system that needs to lighten or darken a brand color programmatically will almost always work in HSL, because hue, saturation and lightness are easier to reason about than raw red-green-blue numbers.

Our color converter runs entirely in your browser. You type or paste a value, pick a color visually, or drag the sliders, and every format updates live along with a WCAG contrast readout. Nothing is uploaded anywhere; the conversion math happens on your device the moment you interact with the page.

HEX, RGB, HSL and HSLA explained

HEX is a base-16 shorthand for RGB. #RRGGBB packs red, green and blue into three two-digit hex pairs, each ranging from 00 to FF (0-255 in decimal). #FF0000 is pure red, #000000 is black, #FFFFFF is white. An optional two-digit alpha channel gives you #RRGGBBAA, where FF is fully opaque and 00 is fully transparent.

RGB describes the same three channels in plain decimal: rgb(255, 0, 0) is red, rgb(0, 0, 0) is black. RGBA adds a fourth value between 0 and 1 for opacity, e.g. rgba(255, 0, 0, 0.5) is red at 50% opacity. RGB is the format closest to how screens actually mix light, which is why color pickers and image editors default to it.

HSL flips the model to how humans think about color: hue is the position on a 0-360 degree color wheel (0 and 360 are both red, 120 is green, 240 is blue), saturation is how vivid the color is from 0% (gray) to 100% (fully saturated), and lightness runs from 0% (black) through 50% (pure hue) to 100% (white). HSLA just adds the same 0-1 alpha channel as RGBA, for example hsla(204, 70%, 53%, 0.8) [4](https://www.colorik.com/tools/color-converter).

Newer formats like OKLCH and LAB exist for perceptually uniform color work, but HEX, RGB and HSL still cover the vast majority of day-to-day CSS, design tool and print work, which is why this converter focuses on getting those conversions exactly right rather than adding formats you'll rarely use.

Worked conversion examples

Take a common Tailwind-style blue, #3B82F6. Converting to RGB gives rgb(59, 130, 246): 3B in hex is 59 in decimal, 82 is 130, and F6 is 246. Converting the same color to HSL gives roughly hsl(217, 91%, 60%) — a strong, fairly light blue sitting between cyan and violet on the wheel.

Now take a muted brand green, hsl(160, 45%, 40%). Run it through the converter and you get #388A6B in HEX and rgb(56, 138, 107) in RGB. Notice how much easier it was to describe 'a medium-dark, moderately saturated green' in HSL than to guess those exact RGB numbers by hand — that's the practical argument for designing in HSL and shipping in HEX.

For transparency, say a designer specs 'brand red at 70% opacity' over a white card. Starting from #E53E3E, the RGBA equivalent is rgba(229, 62, 62, 0.7) and the HSLA equivalent is hsla(0, 74%, 57%, 0.7). Either one is valid CSS; which you use usually comes down to whichever format the rest of your stylesheet already uses, so the values stay easy to compare at a glance.

Checking contrast the right way

The Web Content Accessibility Guidelines (WCAG) define contrast ratio as a number between 1:1 (identical colors) and 21:1 (pure black on pure white). For normal-sized text, WCAG 2 Level AA requires at least 4.5:1 contrast between text and background; large text (roughly 24px regular or 19px bold and above) only needs 3:1 [1](https://browser-tools.net/tools/color-converter). Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text.

UI components and graphical objects — icons, form field borders, focus indicators — have their own 3:1 minimum against their surrounding background under WCAG 2.1's non-text contrast criterion. This is why a light gray border that looks fine on a white card can still fail an accessibility audit even though no text is involved.

The converter calculates contrast using the same relative luminance formula the WCAG spec defines, weighting red, green and blue differently because the human eye is more sensitive to green than blue. Enter a foreground and background color and you'll see the exact ratio plus a pass/fail badge for AA and AAA at both text sizes, so you don't have to do the luminance math by hand.

A quick sanity check worth remembering: pure black text on pure white background is 21:1, comfortably passing everything. Medium gray text (#767676) on white sits right around 4.54:1 — just barely passing AA for normal text, which is why so many 'gray-on-white' body copy choices are riskier than they look.

Common color mistakes to avoid

Confusing hex opacity with CSS opacity is a frequent bug. #FF000080 sets alpha at the color level (roughly 50%), but applying a separate `opacity: 0.5` on the element fades the entire box, including borders and children, not just the fill. Pick one mechanism deliberately rather than stacking both by accident.

Another common error is assuming HSL lightness behaves linearly with perceived brightness. Two colors at hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share the same lightness value but look nowhere near equally bright to the eye, because pure yellow reflects far more perceived luminance than pure blue. Don't rely on HSL lightness alone when contrast actually matters — check the computed ratio instead.

Designers also sometimes round HEX values when converting by hand, producing colors that are close but not exact — enough to cause a hairline mismatch between a design file and shipped CSS. Always copy the converted value directly rather than re-typing it, and double check anti-aliased screenshots aren't throwing off a manual read of a color.

Using converted colors in CSS

All four formats are valid anywhere CSS accepts a `<color>` value: background-color, color, border-color, box-shadow, and inside gradient functions. Modern CSS also supports space-separated syntax such as `rgb(59 130 246 / 50%)`, which does the same job as `rgba()` but matches the newer CSS Color Module Level 4 syntax used alongside oklch() and lab().

For design systems, a common pattern is storing the base color as HSL custom properties — `--brand-h: 217; --brand-s: 91%; --brand-l: 60%;` — and then composing variants like a hover state at 50% lightness or a disabled state at 30% saturation, all without touching a separate hex palette for every shade.

If you're pasting a converted value into a CSS-in-JS file, JSON theme config, or a Tailwind config, keep the format consistent with what the rest of that file uses. Mixing HEX in some places and HSL in others isn't wrong, but it makes visual diffing and color audits harder for the next person who opens the file.

Where this tool fits in a workflow

Use the converter when you're handed a color from one tool and need it in another — a client sends a brand HEX from their logo file, and you need the RGBA equivalent for a semi-transparent overlay, or a Sketch/Figma export gives you HSL and your CSS framework wants HEX.

It's also useful as a quick accessibility gate before you ship a component: paste your proposed text and background colors, confirm the ratio clears 4.5:1, and move on. Doing this at design time is far cheaper than fixing it after an accessibility audit flags low-contrast text in production.

Because everything runs client-side, there's no reason not to keep the tab open while you work — there's no account, no rate limit and no data sent anywhere, so pasting sensitive brand colors from an unreleased product is safe.