To find the hue (or HSL) and RGB values from an input type text using JavaScript, you'll need to extract the color value entered by the user and then convert it into the desired color format. The input type text should contain a valid color representation, such as a hexadecimal value, an RGB value, or an HSL value.

Here's a step-by-step guide on how to do this:

  1. HTML Markup:

First, create an HTML input element where the user can enter the color value:

html
<input type="text" id="colorInput" placeholder="Enter color value"> <button onclick="getColorValues()">Get Color Values</button>
  1. JavaScript Function:

Next, create a JavaScript function to extract and convert the color value entered by the user. In this example, we'll use a regular expression to validate and extract the color value. Once extracted, we'll convert it to HSL and RGB formats using the appropriate JavaScript functions.

javascript
function getColorValues() { const colorInput = document.getElementById('colorInput').value; // Regular expression to validate and extract the color value const hexRegex = /^#?([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/; const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/; const hslRegex = /^hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)$/; // Check if the entered color matches any format (hex, rgb, hsl) let match; if ((match = colorInput.match(hexRegex))) { const [, r, g, b] = match; const rgbValue = `RGB: ${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}`; const hslValue = rgbToHsl(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)); console.log(rgbValue); console.log(`HSL: ${hslValue.h}, ${hslValue.s}%, ${hslValue.l}%`); } else if ((match = colorInput.match(rgbRegex))) { const [, r, g, b] = match; const hexValue = `#${Number(r).toString(16).padStart(2, '0')}${Number(g).toString(16).padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`; const hslValue = rgbToHsl(parseInt(r, 10), parseInt(g, 10), parseInt(b, 10)); console.log(hexValue); console.log(`HSL: ${hslValue.h}, ${hslValue.s}%, ${hslValue.l}%`); } else if ((match = colorInput.match(hslRegex))) { const [, h, s, l] = match; const rgbValue = hslToRgb(parseFloat(h), parseFloat(s), parseFloat(l)); console.log(`RGB: ${rgbValue.r}, ${rgbValue.g}, ${rgbValue.b}`); console.log(`HSL: ${h}, ${s}%, ${l}%`); } else { console.log('Invalid color format. Please enter a valid color value.'); } } // Function to convert RGB to HSL function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; // achromatic } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } // Function to convert HSL to RGB function hslToRgb(h, s, l) { h /= 360; s /= 100; l /= 100; let r, g, b; if (s === 0) { r = g = b = l; // achromatic } else { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; }

In this example, we're handling three color formats: hexadecimal (e.g., "#RRGGBB"), RGB (e.g., "rgb(r, g, b)"), and HSL (e.g., "hsl(h, s%, l%)"). The getColorValues function uses regular expressions to match each format and then converts the color value to RGB and HSL using helper functions rgbToHsl and hslToRgb.

When the user enters a color value in the input field and clicks the "Get Color Values" button, the color's RGB and HSL values will be logged to the console.

Keep in mind that this example assumes that the entered color value is valid and in one of the supported formats. You may want to add additional error handling to account for invalid inputs.

Have questions or queries?
Get in Touch