DanfioSearch tools/

Type a tool name, a pinyin spelling or a synonym - both languages are searched.

Color Converter

Global tools

One color, three notations: a hex code, an rgb() value and an hsl() value say the same thing about the same pixel. Paste any of them in and the page returns all three, in the sRGB space CSS itself assumes, with the alpha channel carried through every format when the input carries one.

Color Converter - Danfio

https://danfio.com/tools/color-converter/ - printed from this page

Automatic mode recognizes a leading #, an rgb( or an hsl( and says which one it found.

A hex code (with or without the #), an rgb()/rgba() or an hsl()/hsla() value. Alpha in the input is carried through every output.

Leave blank to name the file color-conversion.txt.

Results update as you type. Nothing leaves your device.

The same color, three ways

#3498db

#3498db is rgb(52, 152, 219) and hsl(204.1 69.9% 53.1%). The dominant channel is blue, and the value was read as hex.

Detected as
hex
RGB
rgb(52, 152, 219)
HSL
hsl(204.1 69.9% 53.1%)

Red, green and blue channels

  • Red52
  • Green152
  • Blue219

Your monitor draws this as three channels mixed at these strengths. The numbers above are those channels in the sRGB space CSS assumes.

Every format

FormatValue
Hex#3498db
RGBrgb(52, 152, 219)
HSLhsl(204.1 69.9% 53.1%)

This is an exact sRGB conversion, not an approximation: any sRGB display renders #3498db and rgb(52, 152, 219) as the same pixel. Moving to a wider gamut or a printer needs a device profile, which is a conversion this page deliberately does not fake.

Nothing leaves the browser. The color is parsed and converted in the tab, which means a design value that matters is not uploaded anywhere - the same boundary every pure-compute tool on this site keeps.

About this color converter

Color names, hex triples, `rgb()` and `hsl()` values are four ways of writing one sRGB pixel, and this page moves between them without changing the value. Paste any form in and every other form comes back, alpha carried through, so a design token lands in the format the next tool expects.

The arithmetic follows the CSS Color specification, the same rules browsers implement: hex and `rgb()` are one byte triple, and `hsl()` re-describes it as a hue angle, saturation and lightness. The conversion is client-side, so a palette under an embargo is never sent anywhere, and the sRGB assumption is stated rather than hidden.

The page converts within sRGB and says so. It will not invent a wider gamut, a CMYK press value or a named Pantone chip, because those need a device profile the tab does not carry. Treat the numbers as exact for the web and approximate anywhere ink is involved.

How this color converter works

Hex, RGB and HSL are three dialects of one sRGB triple

A color on a screen is three channels - red, green and blue - each a byte from 0 to 255. Hex writes those bytes as two hexadecimal digits each; rgb() writes them decimally; hsl() re-describes the same triple as hue (the angle on a color wheel), saturation and lightness.

The conversions between them are exact within sRGB, which is what the page’s "same pixel" claim rests on. A wider gamut or a printer needs a device profile - a different space entirely - and the page deliberately does not fake that conversion.

Automatic mode detects the format from the text - a leading # points to hex, rgb( to rgb and hsl( to hsl - and falls back in that order, so pasting any of the three usually needs no mode selection at all. The detected format is printed beside the result, so you can see how the page read your input.

Alpha is carried, not dropped

An 8-digit hex or an rgba()/hsla() value is fully opaque in its first three channels and transparent in the fourth. The page keeps that alpha through every output: #ff000080 becomes rgba(255, 0, 0, 0.5), and the opacity survives the trip to HSL and back.

Because alpha is a fourth channel that travels with the color rather than being folded into the three channels, the mapping is exact rather than approximated. The four-digit #rgba shorthand repeats its single alpha digit in the same way CSS does, and the opacity comes out the far side unchanged after a round trip through HSL.

HSL round-trips to the same byte

The conversion to HSL keeps full precision internally so that converting a color to HSL and back lands on the original byte; the page only rounds when it prints the decimal. That is the property that makes the page usable for choosing and comparing colors rather than merely reading them out.

The page rounds the printed value to one decimal place rather than truncating or guessing, so the display stays readable without disturbing the stored color. That precision is why the conversion back to hex lands on exactly the byte you started from, and why the three formats genuinely describe the same pixel.

Names and colorspaces that do not fit are refused, not guessed

A named color like "red" is refused because names are localised and ambiguous in a way the three numeric formats are not - and because guessing a name down to a byte would mean silently adopting one of several palettes. CMYK, Lab and hex longer than eight digits are refused for the same reason: the page converts within sRGB and says so, instead of pretending a print or wide-gamut value has an sRGB answer.

The refusal is deliberate and names the reason: the page says the value does not look like a color it can read and offers the three formats it does accept, so a failed paste explains itself instead of returning a silent wrong answer. The sRGB boundary is also why named colors and over-long hex are left unconverted rather than guessed at.

What the printed HSL loses, and why the alpha byte is coarse

The HSL line is printed to one decimal place because that is what a person can read, and a tenth of a percent of lightness is about a quarter of an 8-bit step. Paste the printed hsl() string back into the page and it can land one byte away from where you started. The conversion inside the page uses the exact values, so Hex and RGB always agree exactly; only the round trip through the printed string can drift by a step.

Alpha is an 8-bit channel too. #80 is 128/255 = 50.2%, which is printed as 0.5, while #01 is 0.4% and #fe is 99.6%. A designer expecting "50%" gets 50.2% in the byte, and a design system that stores alpha as a decimal should not expect a hex round trip to keep more than one byte of it.

Neither point is a bug to fix by printing more decimals: eight digits of HSL would be noise on a screen whose pixels are 8-bit anyway. It is the boundary of what a hex code can carry, and the page states it instead of hiding it behind a prettier number.

Worked examples

Each example below was run through the calculator on this page when the site was built, so the numbers match what you see when you enter the same inputs.

A hex code to every format

What you are pasting: Work it out from the text · Color: #3498db · Download file name: —

The same color, three ways

#3498db

#3498db is rgb(52, 152, 219) and hsl(204.1 69.9% 53.1%). The dominant channel is blue, and the value was read as hex.

Detected as: hex · RGB: rgb(52, 152, 219) · HSL: hsl(204.1 69.9% 53.1%)

#3498db is rgb(52, 152, 219) and hsl(204.3 69.8% 53.1%) - the same pixel, three notations, with the channel bar showing blue leading the mix.

An rgb() value with transparency

What you are pasting: Work it out from the text · Color: rgba(255, 0, 0, 0.5) · Download file name: —

The same color, three ways

#ff000080

#ff000080 is rgba(255, 0, 0, 0.5) and hsl(0 100% 50%). The dominant channel is red, and the value was read as rgb().

Detected as: rgb() · RGB: rgba(255, 0, 0, 0.5) · HSL: hsl(0 100% 50%)

rgba(255, 0, 0, 0.5) becomes #ff000080 and an hsla()-style description at 50% opacity - alpha travels with the color through every output.

An hsl() value read as hex

What you are pasting: Work it out from the text · Color: hsl(120, 100%, 50%) · Download file name: —

The same color, three ways

#00ff00

#00ff00 is rgb(0, 255, 0) and hsl(120 100% 50%). The dominant channel is green, and the value was read as hsl().

Detected as: hsl() · RGB: rgb(0, 255, 0) · HSL: hsl(120 100% 50%)

The pure green hsl(120 100% 50%) comes back as #00ff00 / rgb(0, 255, 0), exact, because the internal conversion keeps full precision.

A three-digit shorthand expands

What you are pasting: Work it out from the text · Color: #f00 · Download file name: —

The same color, three ways

#ff0000

#ff0000 is rgb(255, 0, 0) and hsl(0 100% 50%). The dominant channel is red, and the value was read as auto.

Detected as: auto · RGB: rgb(255, 0, 0) · HSL: hsl(0 100% 50%)

The three-digit shorthand #f00 expands to #ff0000 / rgb(255, 0, 0): each short digit is doubled, exactly as CSS does, so the shorthand and the long form describe the same byte.

Frequently asked questions

What is the difference between hex, rgb and hsl?

All three describe the same sRGB pixel. Hex and rgb write the red, green and blue bytes in different bases; hsl re-describes the color as hue, saturation and lightness, which many people find easier to reason about for adjusting. The values are interchangeable within sRGB.

Is the conversion lossless?

Between hex, rgb and the full-precision HSL value, yes - a color converted and converted back lands on the original byte. The only rounding is in the printed decimals of the HSL display; the internal value keeps enough precision that the round trip is safe.

Why is my converted color different on a printout?

Because print is a different color space. sRGB assumes a specific monitor gamut; ink has its own, much smaller gamut, and converting between them needs a device profile. This page converts within sRGB only, and says so rather than inventing a print conversion.

Can I paste a named color like "red"?

No. Named colors are localised and ambiguous across systems, so the page does not guess a byte from a name - type rgb(255, 0, 0), #ff0000 or the hsl() equivalent instead. Refusing the name is the honest answer to a value the page cannot pin down.

Does the alpha channel work with three- and four-digit hex?

Yes. A three-digit #rgb expands to six digits with full opacity, and the four-digit #rgba form carries one digit of alpha. The page prints 8-digit hex when the input brings an alpha channel, and plain six-digit hex otherwise.

Assumptions and sources

  • The color maths is the sRGB standard (IEC 61966-2-1), the space every screen and every CSS color is written in.
  • Hex, rgb() and hsl() conversions, and the eight-digit `#rrggbbaa` form for transparency, follow CSS Color Module Level 4.
  • The conversion runs in your browser and nothing is uploaded.

Last reviewed 2026-09-26. Runs locally on your device; keep backups; no financial advice applies. Read the full disclaimer.

Where a figure on this page comes from an official agency — HUD, IRS, FICO or a state body — the site keeps a dated snapshot of the source page in its sources library, and a scheduled job re-checks that snapshot, so the number can be traced back to the document it came from.

Related tools

Minifier & BeautifierDeveloper ToolsMinify or beautify CSS and HTML in your browser: comments, whitespace and two safe shortenings, with an honest list of what it will not touch. No upload.Minify or beautify code →Case Converter & Text CleanerText & WritingConvert text to any of twelve cases - Title Case, UPPERCASE, camelCase, snake_case and more - and clean what a paste brought along: odd spaces, curly quotes.Change text case →JSON Formatter & ValidatorDeveloper ToolsPaste JSON and get it formatted, minified or sorted, with the line and column when it is broken plus hints for the four mistakes everyone makes. No upload.Format and validate JSON →Text Diff & CompareText & WritingCompare two texts line by line or word by word: a unified diff, a change list with the words that moved, and switches for case, spacing and blank lines.Diff two texts →Base64 Encoder & DecoderDeveloper ToolsEncode text to base64 or decode it back, in your browser, with the standard and URL-safe alphabets, UTF-8 handled properly, percent-encoding and data URLs too.Encode or decode Base64 →Cron Expression GeneratorDeveloper ToolsTurn a cron expression into plain English and the next run times: five fields or six, Vixie or Quartz, in any time zone, with the traps named. No upload.Build a cron expression →