Free HEX to RGB Converter - Color Code Converter & Picker Tool

HEX to RGB converter

This tool reads a HEX color code and returns the same color in RGB, HSL, CMYK, and an 8-digit HEX/RGBA value, alongside a live swatch, a contrast preview, and a perceived-brightness reading. Type or paste a code, or pick a color visually, and every format updates together.

How the conversion works

A 6-digit HEX code splits into three 2-digit pairs, each a base-16 number from 00 to FF (0 to 255 in decimal) for red, green, and blue. A 3-digit shorthand doubles each digit first, so #3B9 becomes #33BB99 before the same split applies. From that RGB triplet, HSL is derived from the average of the lightest and darkest channel for lightness, the gap between them for saturation, and the order of the channels for hue. CMYK is calculated for reference by finding K from the largest of the three channels, then scaling cyan, magenta, and yellow against it. Perceived brightness uses the ITU-R BT.601 luma weights, R times 299 plus G times 587 plus B times 114, divided by 1000; a result above 128 is labeled Light, at or below it Dark, which also decides which text color reads clearly on the contrast preview. The same input box also recognizes an rgb(r, g, b) string typed directly instead of a HEX code, and every pick from the color picker refreshes the HEX text box automatically. If the code cannot be parsed, the tool shows an inline error message instead of guessing at a color. Each converted value has its own copy button that briefly turns into a checkmark once clicked, so you can grab just the RGB string, the CMYK string, or the CSS line without touching the rest.

Worked example

Take #2E86AB, a mid blue. The pairs give R=46, G=134, B=171, so RGB(46, 134, 171). Averaging the lightest and darkest channel gives 43% lightness, the gap between them gives 58% saturation, and the hue falls at 198 degrees, for HSL(198, 58%, 43%). Running the same RGB through the CMYK formula gives cmyk(73%, 22%, 0%, 33%). The 8-digit form is #2E86ABFF, and the CSS line is color: #2E86AB;. Brightness comes out to 112 out of 255, at or below the 128 midpoint, so the tool labels it Dark and switches the contrast preview to white text.

Example output

Input:  #2E86AB

Output: {
  "rgb":  "rgb(46, 134, 171)",
  "hsl":  "hsl(198, 58%, 43%)",
  "cmyk": "cmyk(73%, 22%, 0%, 33%)",
  "hex8": "#2E86ABFF",
  "css":  "color: #2E86AB;"
}