Back to all snippets
Library/Utilities/Color Converter
javascriptintermediatecolorconversionutilities

How to implement Color Converter in Javascript

Convert between hex, RGB, and HSL color formats

Quick Answer

`hexToRgb` parses a hex string into `{r, g, b}` using a regex and `parseInt(hex, 16)`. `rgbToHex` packs the three channels into a 24-bit integer and converts to hex with `toString(16)`.

Code Snippet

1const hexToRgb = (hex) => {
2  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
3  return result ? {
4    r: parseInt(result[1], 16),
5    g: parseInt(result[2], 16),
6    b: parseInt(result[3], 16)
7  } : null;
8};
9
10const rgbToHex = (r, g, b) => {
11  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
12};

What is Color Converter?

Color format conversion is needed in design tools, data visualisation, and anywhere you need to apply dynamic colors programmatically. hexToRgb parses a hex string into {r, g, b} components using bit operations, and rgbToHex converts the three channel values back to a hex string using the same efficient bit-shifting approach.

How It Works

  1. 1The regex `/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i` captures the three two-digit hex segments.
  2. 2`parseInt(result[n], 16)` converts each segment from hex to decimal.
  3. 3`(1 << 24) + (r << 16) + (g << 8) + b` packs the channels into a 24-bit integer.
  4. 4`.toString(16).slice(1)` converts it to a 6-digit hex string, stripping the leading `1`.

Common Use Cases

  • Theme generators - Convert user-selected hex colors to RGB for CSS variables
  • Data visualisation - Generate color scales by manipulating RGB components
  • Color pickers - Display color in multiple formats simultaneously
  • Canvas drawing - Convert hex palette colors to RGB for canvas fillStyle

Key Benefits

  • Bit-shifting implementation is fast and library-free
  • hexToRgb returns null for invalid hex strings instead of crashing
  • rgbToHex handles all 24-bit color values correctly
  • Easy to extend with HSL conversion

Common Mistakes to Avoid

  • Not handling shorthand hex (`#fff`) — add a step to expand 3-digit hex to 6-digit before parsing.
  • Passing values outside 0–255 to `rgbToHex` — clamp them first with `Math.min(255, Math.max(0, value))`.
  • Using `hexToRgb` result without checking for null — always guard against invalid input.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

How do I convert hex to HSL?

First convert hex to RGB using `hexToRgb`, then apply the RGB-to-HSL formula: normalise channels to 0–1, compute lightness as `(max + min) / 2`, saturation, and hue from the dominant channel.

Related Snippets

javascript
beginner
Generate Unique ID
Generate unique identifiers for items
utilitiesidrandom
javascript
beginner
Email Validation
Validate email addresses with regex
validationemailregex
javascript
beginner
Date Formatting
Format dates in various common formats
dateformattingtime

About This Javascript Code Snippet

This free javascript code snippet for color converter is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement color converter quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: color, conversion, utilities  | Language: javascript  | Difficulty: intermediate  | Category: Utilities

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets