💻 Developer Tools

Color Converter

Convert colors between HEX, RGB and HSL. Pick a color or type a code, and the other formats update live. Everything stays in your browser, so the colors you choose never leave it.

Examples (click to try)

The input above auto-detects whether you paste #hex, rgb() or hsl(). Edit any field and the other formats sync automatically. HEX accepts #RGB / #RRGGBB.

How to Use the Color Converter

Pick a color with the picker, or type a code into the HEX, RGB or HSL field — the remaining formats update on the spot. Use the Copy button on any output field to save the code to your clipboard.

  • Color Picker: Choose a color with the browser's native picker. Your choice flows into the preview and every code.
  • HEX: Accepts both #RGB (3-digit shorthand) and #RRGGBB (6-digit). The # is optional.
  • RGB: Format rgb(234, 99, 121), each channel 0–255. Plain numbers like 234, 99, 121 are read too.
  • HSL: Format hsl(351, 76%, 65%). Hue runs 0–360, saturation and lightness 0–100%.

Example: paste one HEX, get all three formats

The "Color code" field above auto-detects the format. Paste a mockup value like #ea6379 and the other fields sync like this:

  • Input: #ea6379
  • → RGB: rgb(234, 99, 121)
  • → HSL: hsl(350, 76%, 65%)

It works the other way too: paste rgb(132, 207, 160) or hsl(45, 100%, 51%) and it detects the format and converts to HEX and the rest. Then just hit the "Copy" button on the format you need.

When This Comes in Handy

  • Turning a HEX value from a design mockup into CSS rgb() or hsl()
  • Noting and sharing a brand color in whichever format each tool expects
  • Nudging only lightness or saturation in HSL to find a nearby shade
  • Copying the code for a color you just picked from the picker

Frequently Asked Questions

Is the color I enter sent to a server?
No. All HEX, RGB and HSL conversion happens entirely in your browser. The colors and codes you enter are never transmitted to or stored on any server. You can use this tool with complete confidence.
What HEX formats can I enter?
The leading "#" is optional. Both the 3-digit shorthand (#RGB, e.g. #f80) and the 6-digit form (#RRGGBB, e.g. #ff8800) are supported. If the value contains invalid characters, you'll get a gentle heads-up.
What ranges do the HSL values use?
Hue (H) ranges from 0 to 360, while saturation (S) and lightness (L) range from 0 to 100%. RGB channels run from 0 to 255. Edit any format field and the others sync automatically.