snippetjavascriptTip

How can I convert between hexadecimal, RGB, HSL and HSB color formats in JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptrgbhsbhexadecimalandhowcolorbetweenhslformats

Problem

Working with colors often requires converting between different formats, such as hexadecimal, RGB, HSL and HSB. This can be useful when you need to manipulate colors in a specific format, or when you want to display them in a different way.
Before diving into conversion formulas, it's worth discussing the different color formats briefly:

Hexadecimal: A 6-digit hexadecimal representation of a color, with 2 digits for each of the red, green and blue components. For example, #ff0000 represents the color red.
RGB: A comma-separated list of the red, green and blue components of a color, each ranging from 0 to 255. For example, rgb(255, 0, 0) represents the color red.
HSL: A comma-separated list of the hue, saturation and lightness components of a color, with the hue ranging from 0 to 360, and the saturation and lightness ranging from 0% to 100%. For example, hsl(0, 100%, 50%) represents the color red.

Solution

const rgbToHex = (r, g, b) =>
  ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

rgbToHex(255, 165, 1); // 'ffa501'

Hexadecimal: A 6-digit hexadecimal representation of a color, with 2 digits for each of the red, green and blue components. For example, #ff0000 represents the color red.
RGB: A comma-separated list of the red, green and blue components of a color, each ranging from 0 to 255. For example, rgb(255, 0, 0) represents the color red.
HSL: A comma-separated list of the hue, saturation and lightness components of a color, with the hue ranging from 0 to 360, and the saturation and lightness ranging from 0% to 100%. For example, hsl(0, 100%, 50%) represents the color red.
HSB: A comma-separated list of the hue, saturation and brightness components of a color, with the hue ranging from 0 to 360, and the saturation and brightness ranging from 0% to 100%. For example, hsb(0, 100%, 100%) represents the color red.

Converting between RGB and hexadecimal color formats is a matter of converting the red, green and blue components to their hexadecimal representation. This can be done using Number.prototype.toString() combined with the << (left-shift) operator to convert the RGB components to a 6-digit hexadecimal value. Finally, we can use String.prototype.padStart() to ensure that the hexadecimal value is 6 digits long.
Converting the other way round, from hexadecimal to RGB, is a little more involved. In order to isolate the color components from the hexadecimal string, we'll have to use bitwise right-shift and mask bits with & (and) operator.

Code Snippets

const rgbToHex = (r, g, b) =>
  ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

rgbToHex(255, 165, 1); // 'ffa501'

const hexToRgb = hex => {
  let alpha = false,
    h = hex.slice(hex.startsWith('#') ? 1 : 0);
  if (h.length === 3) h = [...h].map(x => x + x).join('');
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    'rgb' +
    (alpha ? 'a' : '') +
    '(' +
    (h >>> (alpha ? 24 : 16)) +
    ', ' +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ', ' +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : '') +
    ')'
  );
};

hexToRgb('#27ae60ff'); // 'rgba(39, 174, 96, 255)'
hexToRgb('27ae60'); // 'rgb(39, 174, 96)'
hexToRgb('#fff'); // 'rgb(255, 255, 255)'

const rgbToHsl = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
};

rgbToHsl(45, 23, 11); // [21.17647, 60.71428, 10.98039]

Context

From 30-seconds-of-code: rgb-hex-hsl-hsb-color-format-conversion

Revisions (0)

No revisions yet.