Color Converter
The color #ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). This color converter reads a HEX, RGB, or HSL value and returns the same color in all three formats. Paste a value such as #3b82f6, rgb(59, 130, 246), or hsl(217, 91%, 60%), then read the matching codes and a live swatch.
Quick answer
HEX writes each red, green, and blue channel as a two-digit base-16 number from 00 to ff.
What this tells you
- •HEX writes each red, green, and blue channel as a two-digit base-16 number from 00 to ff.
- •RGB writes the same three channels as decimal numbers from 0 to 255.
- •HSL describes a color by its hue in degrees, its saturation as a percent, and its lightness as a percent.
- •Conversion normalizes output to lowercase 6-digit hex, integer RGB channels, and whole-number HSL components.
- •RGB input requires three integers from 0 to 255. Decimal, negative, signed-plus, and out-of-range channels are rejected.
- •HSL input requires integer hue from 0 to 360 and integer saturation and lightness from 0 to 100.
- •Alpha channels are not parsed, so 4-digit or 8-digit hex, rgba(), and hsla() return no result.
How to Use
- 1Type or paste a color in any supported format. The default value is the blue #3b82f6.
- 2Use 3- or 6-digit hex such as #f00 or ff0000, integer RGB such as 255,0,0 or rgb(255, 0, 0), or HSL such as 0,100%,50% or hsl(0, 100, 50). A bare HSL triplet needs percent signs so it is not read as RGB.
- 3Select Convert to read the HEX, RGB, and HSL versions of the same color.
- 4Check the swatch above the results to confirm the color looks right.
How It Works
Formula
RGB channel = base-16 value of each hex pair (00 to ff = 0 to 255). HSL is derived from normalized RGB where lightness = (max + min) / 2A hex code splits into three pairs, and each pair is a base-16 number for the red, green, and blue channel from 0 to 255. To find HSL, divide each channel by 255, take the largest and smallest of the three, set lightness to their average, derive saturation from their spread, and set hue from which channel is largest. For example #ff0000 has channels 255, 0, 0, so lightness is (1 + 0) / 2 = 0.5, which prints as 50 percent.
Calculation note: values are processed in the order shown above, using the current input units.
Worked Examples
Hex to RGB and HSL
ff is 255, and the two 00 pairs are 0, so the color is pure red. Red sits at hue 0 with full saturation and 50 percent lightness.
RGB to hex
0 is 00 and 128 is 80 in base 16, so the hex code is #008000. The low lightness of 25 percent shows this is a dark green.
HSL to hex
Hue 240 with full saturation and 50 percent lightness is pure blue, which is 0000ff in hex.
Short uppercase hex
Input is lowercased and each shorthand digit is doubled. The converter normalizes #0F0 to the full lowercase hex code #00ff00.
Bare HSL with percent signs
A percent sign tells the detector to parse the bare comma triplet as HSL. Hue 120 at full saturation and 50% lightness converts to green.
Rounded HSL output
The hex pairs convert exactly to RGB channels 59, 130, and 246. Hue, saturation, and lightness are rounded to whole output values.
Common Color Conversions
Quick reference for the primary and secondary colors plus black and white.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
Each row shows the same color written in all three formats.
Parsing, rounding, and visual color limits
Format detection follows the text. A value beginning with hsl is parsed as HSL. A bare triplet containing a percent sign is also HSL. A value beginning with rgb, or a bare comma triplet without percent signs, is parsed as RGB. Text without commas falls through to 3- or 6-digit hex validation.
The accepted components are integers. RGB channels must stay from 0 through 255. HSL hue must stay from 0 through 360, and saturation and lightness must stay from 0 through 100. In wrapped hsl() input, percent signs on saturation and lightness are optional. A bare HSL triplet needs at least one percent sign for correct format detection.
HSL conversion rounds hue to the nearest degree and saturation and lightness to the nearest whole percent. Converting that rounded HSL text back to RGB can change a channel slightly. HSL input also rounds calculated RGB channels to whole numbers because 8-bit sRGB channels cannot contain fractional values in this output.
The swatch is a screen preview, not a color-managed proof. Displays, browser color management, brightness, ambient light, and device profiles can make the same code look different. The tool does not convert print CMYK, Lab, LCH, Display P3, ICC profiles, or spot colors.
Matching codes do not establish accessible contrast. Text contrast depends on foreground, background, font size, weight, and applicable accessibility criteria. Check the actual color pair with a contrast tool and do not rely on hue alone to communicate status or meaning.
Common mistakes
- Leaving off the leading hash is fine, but a stray invalid character like a letter past f makes the hex code fail.
- Mixing up 3-digit and 6-digit hex. The 3-digit form #f00 doubles each digit to #ff0000, so #f00 and #ff0000 are the same color.
- Entering a bare HSL triplet without percent signs. The detector reads 0,100,50 as RGB, while hsl(0, 100, 50) is explicitly HSL.
- Entering decimal RGB or HSL components even though this parser accepts integers only.
- Expecting 4- or 8-digit hex and rgba or hsla transparency to work. Alpha formats are unsupported.
- Treating the swatch as a print proof or assuming every display renders the same sRGB code identically.
- Choosing text and background colors without checking contrast and non-color cues for accessibility.
Embed this calculator on your site
Drop this single line where you want the calculator to appear. It is responsive, mobile-friendly, resizes automatically, and is free to use with attribution.
<script src="https://calctide.com/embed.js" data-tool="color-converter" async></script>Preview the embed at /embed/color-converter/.