Text Processing with JavaScript

Recipe 5

Converting Color Names to Hexadecimal Values with the Canvas Element

Task

Suppose you’re working on a drawing application that works with hexadecimal (hex) color codes. You want to provide a field that lets users enter a color name to be converted to its hex equivalence automatically.

You need a solution for converting colors into their hex representation.

Solution

Create a temporary HTML canvas element, obtain its 2D context, and use the fillStyle property to convert the color:

part_1/converting_color_to_hex/color_to_hex_ex1.js

function convertColorToHex(color) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  return ctx.fillStyle.toUpperCase();
}