Color Converter

Convert HEX, RGB and HSL with a live preview.

Free color converter. Enter any one of HEX, RGB or HSL and get all three formats plus a preview swatch, with copy buttons, in your browser.

Loading tool…

If the tool stays on this message, make sure JavaScript is enabled, then reload the page.

About Color Converter

Designers think in HEX, developers write RGB, and anyone adjusting a palette by feel reaches for HSL. They're three dialects for the same thing, a color on your screen, and translating between them by hand is tedious enough that nobody should.

Enter any one format and this tool fills in the other two, with a live swatch so you can see the color while you work and one-click copy buttons for each value. HEX like #ff6600, RGB like rgb(255,102,0), and HSL like hsl(24,100%,50%) are all accepted, including shorthand forms like #f60.

A quick orientation: HEX is the compact favorite of stylesheets, RGB maps directly to how screens mix red, green, and blue light, and HSL describes color the way humans think, hue as an angle on the color wheel, then saturation and lightness. That last one is the secret weapon for design work: nudge the lightness value and you get perfect tints and shades without guessing. Conversions are rounded to whole numbers, which is the standard for CSS colors.

How to use Color Converter

  1. Type a color in HEX, RGB or HSL.
  2. Click its Convert button.
  3. Preview the swatch and copy any format.

Why use this tool?

  • Any one input fills in all three formats
  • Live preview swatch
  • One-click copy per format

Tips for best results

  • Use HSL when building a palette: fix the hue and vary lightness for tints and shades that always harmonize.
  • Shorthand HEX like #f60 is identical to #ff6600, use whichever your codebase prefers.
  • Copy the format your stylesheet already uses; mixing HEX and RGB in one file is just untidy.
  • For text colors, check contrast ratios for accessibility separately. Matching brand colors isn't enough for readability.
  • RGB values run 0–255 per channel; in CSS you can also write them as percentages.
  • Store one canonical format in your design tokens and convert from it, so shades never drift apart.

Frequently asked questions

Which formats are accepted?
HEX like #ff6600 or #f60, RGB like rgb(255,102,0) or 255,102,0, and HSL like hsl(24,100%,50%).
Is anything uploaded?
No. Conversion happens locally in your browser.
Are the conversions exact?
Values are rounded to whole numbers, which is standard for CSS colors.
What is HSL and when should I use it?
HSL stands for Hue, Saturation, Lightness. It describes color as an angle on the color wheel plus vividness and brightness. It's the most intuitive format for adjusting colors, since changing lightness gives clean tints and shades.
Can it convert CMYK or Pantone?
No, this tool handles screen colors (HEX, RGB, HSL). CMYK and Pantone are print color systems with different gamuts, so conversions there are approximate by nature.

Related tools

Regex TesterTest regular expressions with live highlighting. UUID GeneratorGenerate secure random UUIDs in bulk. Base64 EncoderEncode text or files to Base64 in one click. JSON Formatter & ValidatorBeautify, validate and inspect JSON instantly.