Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery?
Take for instance:
Color Name RGB
black #000000
white #FFFFFF
red #FF0000
green #008000
Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery?
Take for instance:
Color Name RGB
black #000000
white #FFFFFF
red #FF0000
green #008000
For example:
let result = ntc.name('#6195ed');
let rgb_value = result[0]; // #6495ed : RGB value of closest match
let specific_name = result[1]; // Cornflower Blue : Color name of closest match
let is_exact_match = result[2]; // false : True if exact color match
Another version of Name that Color offers extra features:
For example:
let result = ntc.name('#6195ed');
let rgb_value = result[0]; // #6495ed : RGB value of closest match
let specific_name = result[1]; // Cornflower Blue : Color name of closest match
let shade_value = result[2]; // #0000ff : RGB value of shade of closest match
let shade_name = result[3]; // Blue : Color name of shade of closest match
let is_exact_match = result[4]; // false : True if exact color match
If you want to find the closest color name for any RGB combination, check out the color_classifier.js plugin. It effectively identifies the nearest color with a name.
To use it, follow these steps:
window.classifier = new ColorClassifier();
get_dataset('dataset.js', function (data){
window.classifier.learn(data);
});
var result_name = window.classifier.classify("#aaf000");
To start off, develop a function that will convert the rgb color to hsl:
function rgbToHsl(rgbArr) {
var r1 = Number(rgbArr[0]) / 255, g1 = Number(rgbArr[1]) / 255, b1 = Number(rgbArr[2]) / 255;
var maxColor = Math.max(r1,g1,b1), minColor = Math.min(r1,g1,b1);
var L = (maxColor + minColor) / 2 , S = 0, H = 0;
if(maxColor != minColor){
if(L < 0.5){
S = (maxColor - minColor) / (maxColor + minColor);
}else{
S = (maxColor - minColor) / (2.0 - maxColor - minColor);
}
if(r1 == maxColor){
H = (g1-b1) / (maxColor - minColor);
}else if(g1 == maxColor){
H = 2.0 + (b1 - r1) / (maxColor - minColor);
}else{
H = 4.0 + (r1 - g1) / (maxColor - minColor);
}
}
L = L * 100;
S = S * 100;
H = H * 60;
if(H<0){
H += 360;
}
return {h:H, s:S, l:L};
}
Next, create another function to categorize the colors based on their hsl values:
function determineColorName(hsl) {
var l = Math.floor(hsl.l), s = Math.floor(hsl.s), h = Math.floor(hsl.h);
if (s <= 10 && l >= 90) {
return ("White")
} else if (l <= 15) {
return ("Black")
} else if ((s <= 10 && l <= 70) || s === 0) {
return ("Gray")
} else if ((h >= 0 && h <= 15) || h >= 346) {
return ("Red");
} else if (h >= 16 && h <= 35) {
if (s < 90) {
return ("Brown");
} else {
return ("Orange");
}
} else if (h >= 36 && h <= 54) {
if (s < 90) {
return ("Brown");
} else {
return ("Yellow");
}
} else if (h >= 55 && h <= 165) {
return ("Green");
} else if (h >= 166 && h <= 260) {
return ("Blue")
} else if (h >= 261 && h <= 290) {
return ("Purple")
} else if (h >= 291 && h <= 345) {
return ("Pink")
}
}
Lastly, include a function to determine the intensity of the color:
function getColorIntensity(rgb){
var hex = "",hex += Number(rgb[0]).toString(16), hex += Number(rgb[1]).toString(16), hex += Number(rgb[2]).toString(16), txt = "";
var rgbVal = parseInt(hex, 16);
var r = (rgbVal >> 16) & 0xff;
var g = (rgbVal >> 8) & 0xff;
var b = (rgbVal >> 0) & 0xff;
var intensity = 0.2126 * r + 0.7152 * g + 0.0722 * b;
if(intensity >= 80 && intensity <= 100){
txt = "semi dark";
} else if(intensity < 40){
txt = "dark";
} else{
txt = "light";
}
return txt;
}
Example:
var colorCode = "rgb(253, 209, 57)";
var rgbValues = colorCode.replace(/[^0-9,]/g,'').replace().split(",");
var finalColorName = determineColorName(rgbToHsl(rgbValues))+" "+getColorIntensity(rgbValues);
console.log(finalColorName);
This particular color scheme was generated by leveraging a specific query selector on this particular webpage
It could prove to be quite handy if you're working on a jQuery plugin or any other project without npm, and wish to steer clear of third-party libraries
JSON.stringify(Array.from(document.querySelectorAll('.colorbox')).map((el) => ({
[el.querySelector('.colornamespan > a').innerText.toLowerCase()]: el.querySelector('.colorhexspan > a').innerText.toLowerCase()
})).reduce((acm, cur) => ({...acm, ...cur}), {}));
https://i.sstatic.net/xL1ar.png
const wordToHex = {
// List of colors with their respective hexadecimal values
};
const hexToWord = Object.fromEntries(Object.entries(wordToHex).map(([k, v]) => [v, k]))
const toHex = (color) => wordToHex[color.toLowerCase()];
const fromHex = (hex) => hexToWord[hex.toLowerCase()];
For the sake of precision...
There exists a mere 139 color codes with an acknowledged identifier (not 140), among which two are known by both names!
The pairings are as follows:
Aqua/Cyan = #00FFFF
Fuchsia/Magenta = #FF00FF
Therefore, the complete count of color identifiers accepted by browsers is 141.
Check out the RGB values and their respective color names here:
The way in which you utilize this information will vary based on your specific needs - whether storing it in a database or hardcoding it into your application.
I am having an issue where elements I want to drag on a canvas are not appearing next to each other as expected. Instead, they are overlapping: To make these elements draggable, I am utilizing the dragElement(element) function from https://www.w3schools.c ...
Recently, I've been facing significant challenges with React's useEffect and States. The issue arises when I redirect to the main page of my app and then attempt to use them again. In the following component, everything seems to function correct ...
Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...
I have a dropdown list of cars where an error message is displayed if any of them becomes inactive. When the error message is shown, clicking on the Route Car button should prevent any event from occurring, i.e., no modal popup should be displayed. How ca ...
I am looking to revamp my current sign-in page by transitioning it into a material UI style login page. Displayed below is the code for my existing sign-in component named "Navbar.js". This file handles state management and includes an axios call to an SQ ...
Hello everyone, I am having trouble with some JavaScript code. Here is what I have: $(document).ready(function(){ $(".replyLink").click(function(){ $("#form-to-"+this.id).html(htmlForm()).toggle(500); return false; }); function htmlForm(){ var htm ...
I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...
I have a JavaScript file that runs automatically through an HTML script. The issue I am facing is with the putToggleCall() function, which should be triggered every time one of the toggles is clicked. However, it only executes once, even before the docum ...
In my JavaScript script, I am defining this array: var status=[ { "name":"name1", "level":0 }, { "name":"name2", "level":0 }, { "name":"name3", "level":0 }, { "name":" ...
I need to pass an array to another function <div id="test"></div> <div id="test2"></div> <input type="button" value="chk" id="go" /> <script> $(function() { var c = 1; var i = 5; var dat ...
Currently, I am facing an issue with my API where the model variable is returning undefined before any data is populated in the return_array. I am unsure of how to implement promises or another method to ensure that the variable waits for data to be fille ...
I'm a beginner in the world of React and I could really use some assistance. Right now, I am working on creating a portfolio using React and focusing on the Nav component. Although I haven't encountered any errors in the Console, when I click on ...
My goal is to develop a strategy game using an SVG map that I have created. I want to include attributes such as "troops" in each "path" representing territories, along with other properties. Can I add these attributes to individual paths and then use this ...
I'm in the process of developing a web application that dynamically changes its CSS styles based on user input. Everything is working smoothly, but I'm facing an issue with my automated tests not confirming whether the CSS updates are actually ta ...
Is it possible to create a fixed width right column in Bootstrap while keeping the left column responsive? I am currently working with Bootstrap 2.3.2 https://i.stack.imgur.com/xOhQo.png (source: toile-libre.org) I want the right column to maintain it ...
I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...
My table is extending beyond the width of both the navbar and footer. Is there a way, using HTML and CSS, to make the navbar and footer expand in width to match that of the table? Most solutions I've found focus on formatting the table instead of addr ...
I am currently developing a frontend to demonstrate the behavior of a CRUD RESTful API. One specific requirement is that when the user selects the option "GET", the default value in the dropdown field labeled "Order-by" should be set to "Name". However, fo ...
I discovered a helpful script on how to select all contents of a textbox when it receives focus using JavaScript or jQuery. My attempt to implement this in IE10 revealed that the focus was being cleared at a later time, and my efforts to prevent this (whi ...
<input type="text" class="form-control" id="exampleInputEmail2" name="productName" value={{product.productName}} > When I input 'Smart Phones' into product.produc ...