🔧 TL3 Tools

What the Color Converter Accepts

The input box accepts four ways of writing a color, plus anything you paste that matches one of them. Hex codes in three, six, or eight digits: #f00, #ff0000, and #ff000080, where the final pair is the alpha channel. Functional notation: rgb(r, g, b), rgba(..., a), hsl(h, s%, l%), and hsla(..., a), with spaces, commas, or slashes as separators. A native color picker that loads the chosen color into the input and parses it like any other.

Every parse feeds the same three output fields — hex, RGB, and HSL — plus a swatch preview. When the color carries alpha, the outputs switch to their rgba and hsla forms, and the hex gains an eighth digit.

How the Conversions Work

Hex is three bytes in disguise: each pair of digits is one channel in base 16, so ff means 255 and 00 means zero. Three-digit shorthand expands each digit once — #f00 becomes #ff0000 — and the standard two-digit pairs are read directly. RGB splits a color into red, green, and blue components; HSL describes the same color by hue angle (0–360), saturation percentage, and lightness percentage. The converter applies the textbook transformations in both directions, rgb() to hsl() and hsl() back to rgb(), using the same math browsers use.

Alpha is a fourth channel. In hex it is one byte from 00 to ff; in the functional forms it is a decimal fraction from 0 to 1. The color picker carries no alpha, so using it sets opacity back to fully opaque. Nothing you enter leaves this page — the parsing runs entirely in your browser.

A Worked Example: Google Blue #4285F4

Take the well-known Google blue, #4285F4. The converter reads the pairs 42, 85, and F4 in base 16 — decimal 66, 133, and 244 — so the RGB field fills with rgb(66, 133, 244). The HSL field reports hsl(217, 89%, 61%): a hue of 217 degrees, saturation 89%, lightness 61%.

Enter the same color as rgb(66, 133, 244) and the three outputs agree with the hex run exactly, because RGB bytes convert without loss. Enter hsl(217, 89%, 61%) instead and the result comes back rgb(67, 135, 244) — a couple of points off, for the reason in the next section.

Add an alpha pair to the hex, #4285F480, and the outputs switch to rgba(66, 133, 244, 0.5019607843137255) and the equivalent hsla form — the functional forms print the raw fraction, while the hex side rounds the alpha byte to 80.

Short hex doubles up the same way: #f00 expands each digit to become #ff0000, which reads as rgb(255, 0, 0) and hsl(0, 100%, 50%) — pure red at full saturation and mid lightness. There is no four-digit hex; only 3, 6, and 8 digits parse, and a five-digit string is ignored.

Where the Conversion Can Surprise You

• HSL round-trips drift by a point or two. Hue, saturation, and lightness display as whole numbers, so the fractions inside are lost. #4285F4 shows hsl(217, 89%, 61%), but typing that value back in yields rgb(67, 135, 244). Hex and RGB survive the round trip exactly; HSL does not.
• Unreadable input does nothing. There is no error message; an empty box, a stray letter, or a five-digit hex like #12345 leaves the previous results untouched and the page silent.
• Alpha prints two ways. The rgba and hsla forms show the long decimal fraction while hex rounds to the nearest byte; both describe the same opacity, digit for digit they differ.
• Hex comes back lowercase. #4285F4 is rewritten to #4285f4 — harmless, but not the casing you typed.
• Leading zeros keep bytes two digits. A channel below 16 pads to hold its place: rgb(0, 128, 255) converts to #0080ff, and rgb(0, 8, 255) to #0008ff. Without the pad, a five-character string would misread entirely.
• Grayscale reports hue zero. When all three channels are equal, saturation is zero and the hue carries no meaning; the converter still prints 0, so #ffffff comes back hsl(0, 0%, 100%) and #000000 hsl(0, 0%, 0%).
• The picker erases transparency. Choosing a color from the swatch sets alpha back to 1, overwriting any opacity you had entered.

Questions About Color Formats and Values

What does the extra pair in an 8-digit hex mean?

Alpha opacity: 00 is fully transparent, ff is fully opaque, and values in between are partial. #4285f480 is 128/255, about 50%.

Why does the alpha show so many decimals?

The input byte divides by 255 and the fraction prints as-is; the hex form rounds to the nearest byte. Same opacity, two notations.

Can I paste from a design tool or CSS?

Yes. The parser accepts the four formats with spaces, commas, or slashes as separators, percent signs work in HSL, and extra parentheses are stripped.

Why did my pasted color not change anything?

It was not recognized. Hex needs 3, 6, or 8 digits; rgb and hsl need at least three numbers separated by commas, spaces, or slashes. Look for stray characters or a wrong digit count.

Is #rrggbbaa supported like modern CSS?

Yes. The 8-digit form is exactly that format, and it parses the same way browsers do.

Why lowercase hex in the results?

The converter emits lowercase. Browsers treat both cases identically, so the change is cosmetic.

When to Use a Color Converter (and When Not To)

Reach for it when a color crosses a format boundary: a brand hex that a stylesheet needs as rgb(), an HSL value from a picker that a design token stores as hex, or an 8-digit hex that needs a human-readable opacity check before it ships. It also earns its keep while debugging — a hex that renders unexpectedly can be split into channels to see which component is off.

Leave it on the shelf when color management is at stake. CMYK, Lab, and print color spaces do not map one-to-one through RGB, and matching a physical print color needs a profile-based workflow. Contrast and accessibility are separate concerns too — this page converts colors, it does not judge them.