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}), {}));
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 currently immersed in creating a captivating fish animation. My fish sprite is dynamically moving around the canvas, adding a sense of life to the scene. However, my next goal is to introduce food items for the fishes to feast on within the canvas. Un ...
My website has a menu on the home page that scrolls to specific id positions: <li><a href="#event-section">El evento</a></li> <li><a href="#asistentes-section">Asistentes</a></li> <li><a href="#cont ...
I'm encountering a CORS issue with my application. My tech stack consists of Node.js using Express 4 and AngularJS Despite attempting various solutions, I continue to receive the following error for all POST/PUT requests: No 'Access-Control-Al ...
My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...
I have implemented the following code in my application. The dataService holds all the $http requests in my app. In the controller, I am using this function to call a Web Api service which returns the correct response. However, when the function customer ...
Is there a way to pass the index of the v-for loop as a parameter in my removeTask function? I'm looking for suggestions on how to achieve this. <ol class="list-group"> <li v-for="task in tasks" class="list-group-item"> ...
Trying my hand at constructing a page object for login testing with WebdriverIO. Encountering the error ERROR: Class extends value #<Page> is not a function or null on line 3 of login.page.js. No clue what mistake I'm making... Is there a wron ...
Without diving into the usual question of how to execute a script after a page has finished loading, I have an example set up here (check out this fiddle): $.getScript("http://platform.linkedin.com/in.js").done(function() { alert('hello'); ...
Imagine I have an API call that performs X and I convert it into asynchronous code using async/await: export default async (req: NextApiRequest, res: NextApiResponse) => { let success = await sendEmail({ //... }); return res.status(200) ...
What is the best method for uploading, displaying, and saving an image in a database using jQuery JavaScript with API calls? I am working with four fields in my database: 1. File ID 2. Filename 3. Filesize 4. Filepath ...
I've encountered an issue with vuex getters while working on my project. I have a route that showcases all users, and upon visiting this route, the AllUsers.vue component is displayed. Within this component, I'm utilizing the UsersList.vue compo ...
I am in the process of creating a resource to send data to my controller for an existing API that I need to connect with. Unfortunately, I do not have the ability to make any changes on the backend. Current state of my Resource factory: 'use strict& ...
I am facing an issue with multiple kendo charts on my website. These charts have panning and zooming enabled, but in the mobile view, they take up 100% of the width which causes touch events to not work properly for scrolling. I attempted to attach an even ...
I've been attempting to apply js-defined animations to the ng-class directive using the standard syntax of add and remove, but for some reason, the animations are not running. After checking the logs, it seems that the add and remove functions are not ...
I followed a tutorial to create a jQuery Carousel, but made some modifications. You can find the tutorial here. This is the code I have: (function ($) { $.fn.infiniteCarousel = function () { // Function to repeat a string function repeat(str, num ...
Encountering an issue, I needed a Kendo UI Grid widget with its height set to 100% of the surrounding <div>. Attempting basic CSS styling on the grid proved unsuccessful: html, body { height:100%; } .expand-vertical { height: 100%; min-h ...
Check out the JSFiddle Demo Within my email sidebar, I implemented a custom right-click feature that allows users to add new sub-folders. The code snippet below demonstrates how this functionality works: if ($(this).hasClass('NewSubFolder')) { ...
Is there a clever JavaScript technique to differentiate between Iterator and AsyncIterator without initiating the iteration process? I'm attempting to create a type checker like this: function isAsyncIterator<T>(i: Iterator<T> | AsyncIter ...
Exploring Ajax for the first time, I am eager to incorporate database interaction using AJAX in JQUERY by connecting to a PHP script. $(function() { $.ajax({ type: "POST", url: "response.php", ...
I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. HTML <div class='tab ...