How to convert Color Names to Hexcode using JavaScript
A guide on how to convert color names (e.g., "red", "blue") into Hex color codes (#RRGGBB) using JavaScript. This method helps manipulate colors efficiently in web development.
In this article, we will learn how to convert common color names into Hex color codes using JavaScript. We'll leverage an HTML canvas object to obtain the color values in Hex format from the color names.
JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Name to Hexcode Converter</title>
</head>
<body>
<h2>Convert Color Name to Hexcode</h2>
<input type="text" id="colorName" placeholder="Enter color name (e.g. red)">
<button onclick="convertColor()">Convert</button>
<p id="hexCode">Hexcode: </p>
<script>
// Function to convert color name to hex code
function convertColor() {
const colorName = document.getElementById("colorName").value; // Get the color name from input
const canvas = document.createElement("canvas"); // Create a canvas element
const ctx = canvas.getContext("2d"); // Get the 2D context
// Assign the color name to the canvas context
ctx.fillStyle = colorName;
const hexCode = ctx.fillStyle; // Retrieve the hex code from fillStyle
// Display the hex code in the paragraph
document.getElementById("hexCode").innerText = `Hexcode: ${hexCode}`;
}
</script>
</body>
</html>
Detailed explanation:
-
<!DOCTYPE html>: Declares the document as an HTML document. -
<input type="text" id="colorName">: Creates an input field for the user to enter a color name. -
<button onclick="convertColor()">: Button to trigger theconvertColorfunction when clicked. -
function convertColor(): Defines the JavaScript function to convert color names to hex codes. -
const colorName = document.getElementById("colorName").value;: Retrieves the color name from the input field. -
const canvas = document.createElement("canvas");: Creates acanvasobject to use drawing methods. -
const ctx = canvas.getContext("2d");: Retrieves the 2D context for drawing and getting color values. -
ctx.fillStyle = colorName;: Assigns the color name to thefillStyleproperty of the canvas. -
const hexCode = ctx.fillStyle;: Gets the hex code fromfillStyle. -
document.getElementById("hexCode").innerText = ...;: Displays the hex code in the paragraph element.
Tips:
- The color names should follow the CSS-supported color names (e.g., "red", "blue", "green").
- If you want to convert RGB to hex, you may need to implement a conversion function from RGB values to hex format.