Softonic

Color Code Converter

Step 1 / 2
Next

Paste a colour in hex (#ff6600 or #f60), rgb(255, 102, 0), comma-separated 255, 102, 0, or hsl(24, 100%, 50%), and the converter returns it in the other two formats instantly, with a live swatch preview and one-click copy per format.

How colour code conversion works

  1. 1

    Enter a colour in a supported format

    Hex (#abc, #abcdef), rgb(r, g, b), comma-separated r, g, b, or hsl(h, s%, l%).

  2. 2

    Parsed to an internal representation

    The tool converts the value to RGB internally, then derives the hex and HSL equivalents from it.

  3. 3

    All formats displayed

    The matching hex, RGB and HSL strings are shown side by side.

  4. 4

    Live preview swatch

    Shows the resulting colour at a glance so you can confirm the conversion before copying.

Supported formats

Format Example Use
Hex 3 #F66 Shorthand; only for colours with repeated digits
Hex 6 #FF6B6B Default for CSS and graphic design
RGB rgb(255, 107, 107) CSS, JS, design software
Comma separated 255, 107, 107 Same as RGB without the function syntax
HSL hsl(0, 100%, 71%) Easier to reason about hue/saturation/lightness

When to use which

  • Hex for static CSS, design handoff.
  • RGB when you pass the channels to JavaScript or design software.
  • HSL when adjusting brightness or saturation, the mental model is clearer than RGB.

Other formats such as HSV, CMYK, LAB, LCH and OKLCH exist in design tools. They describe the same colour in different ways, but this converter focuses on the three core web formats above.

Accuracy

  • Conversions between hex, RGB and HSL are exact: hex and RGB are the same colour model, and HSL is derived from RGB with a standard formula.
  • HSL values are rounded to whole numbers, so converting back and forth can shift the last digit. The visible colour is identical; use hex for bit-exact round trips.

Frequently Asked Questions

Hex or rgb() for broad compatibility. hsl() when you want readability. Modern browsers also support oklch() and other formats, but hex remains the safest default.

No, the converter accepts opaque colours only: 3- or 6-digit hex, rgb() and hsl() without an alpha channel. Keep rgba() or 8-digit hex in your CSS directly.

No, the converter accepts the three numeric formats only. Use a colour picker or an online lookup to convert a named colour to hex first.

HSL is shown with whole-number hue, saturation and lightness, so a round trip can shift a value by one point. The visible colour is identical; use hex when you need an exact copy.

Related Tools

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.