Looking for a JavaScript function that can determine the name of a color.
Would like the JavaScript function to be structured as shown below:
function getColorName(r, g, b)
{
....
return <color name>; // such as blue, cyan, magenta, etc.
}
Looking for a JavaScript function that can determine the name of a color.
Would like the JavaScript function to be structured as shown below:
function getColorName(r, g, b)
{
....
return <color name>; // such as blue, cyan, magenta, etc.
}
If you want to identify colors with color_classifier.js, you can easily achieve that by using the provided plugin. It effectively determines the closest color name based on the given RGB combination.
Simply follow these steps:
window.detector = new ColorDetector();
load_data('data.json', function (info){
window.detector.analyze(info);
});
var color_result = window.detector.detect("#00ffaa");
If you are looking to determine which color a set of RGB values represents, you can utilize the following function:
function getColorName(r, g, b) {
switch ((r >> 5)*100+(g >> 5)*10+(b >> 5)) {
case 400: return "maroon";
case 700: return "red";
case 750: return "orange";
case 770: return "yellow";
case 440: return "olive";
case 404: return "purple";
case 707: return "fuchsia";
case 777: return "white";
case 070: return "lime";
case 040: return "green";
case 004: return "navy";
case 007: return "blue";
case 077: return "aqua";
case 044: return "teal";
case 000: return "black";
case 666: return "silver";
case 444: return "gray";
}
}
If the RGB values do not match a known color, the function may return the closest matching color (e.g. getColorName(230,240,250) returns "white"), or undefined.
If you're looking for a complete list of standard colors, you can find them all here: http://www.w3.org/TR/CSS21/syndata.html#color-units
Keep in mind that this list may not cover all color keywords available on different platforms. For additional color options, check out: http://www.w3schools.com/cssref/css_colornames.asp
To use a known color set, simply create a mapping of (r, g, b) -> name. This function is straightforward to create and implement.
//This function is designed to convert a hexadecimal format to an RGB color
function hex2rgb(hex){
hex = hex.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" +
("0" + parseInt(hex[1],10).toString(16)).slice(-2) +
("0" + parseInt(hex[2],10).toString(16)).slice(-2) +
("0" + parseInt(hex[3],10).toString(16)).slice(-2);
}
Here is an example demonstrating how to utilize this function with jQuery:
document.write( hex2rgb($('#myElement').css('background-color')) );
// result: #222222
By utilizing this output, you can compare it with a switch function to identify the name of the color
switch(color_code){
case '#111111' : return ColorOne; break;
case '#222222' : return ColorTwo; break;
case '#333333' : return ColorThree; break;
}
//Function to convert hex format to a rgb color
function hex2rgb(hex) {
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
hex = hex.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function rgb(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
return "#" + rgb(hex[1]) + rgb(hex[2]) + rgb(hex[3]);
}
For further reference, you can visit this JSFiddle Link which might be useful. --> ClickHere
I've been thinking about how to optimize this pseudo-code: function foo() { if (condition) { return somethingReturningPromise().then(function (data) { doSomethingOnSuccess(data); return mainFunctionReturningPromise(); // he ...
I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...
I am currently live streaming audio to my player using the Soundcloud API. <audio></aidio> <source src="soundcloud-track-url"></source> Within my code, I have added an onerror eventListener for both the <audio> and <sourc ...
Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...
As a newcomer to Node.JS, I am currently experimenting with calling a REST API using the GET method. I have utilized the 'request' package available at this link. While the call functions correctly, I encounter an issue when attempting to return ...
I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...
I am struggling with setting a component to only display when the user wants to edit the content of an entry, and encountering an error mentioned in the title. To achieve this, I have utilized setState to manage a boolean using toggle and setToggle, then ...
I am relatively new to working with Angular and I have encountered a challenge in creating a filter for a specific value. Within my component, I have the following: myData$: Observable<MyInterface> The interface structure is outlined below: export ...
My goal is to develop a React component that serves as a navigation bar. This particular component is intended to be imported from a separate file into my App.js. Currently, the component is designed to simply display a 'Hello world' paragraph, ...
Having a bit of trouble figuring out how to obtain the desired value within this function. Any ideas? Thanks! temp = exotics[i].split(','); if ($.inArray(temp[0], tblProbables) != -1) { item = $("<li><a id='" + temp[0] + "&apo ...
I've searched through the questions here but haven't found a precise answer to my query :( However, I have managed to find something. I have a form select field that I populate from a database query. <select style="width:100%;" class="quform ...
I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...
I am trying to send binary data to the client using node.js, but I have encountered a limitation where write can only send string or Buffer. How can I successfully send binary data to the client? dbconnect.selectBinary(conn,function(result) { //resul ...
Currently, I am faced with the challenge of working on multiple Autocomplete MUI components and am in the process of creating a "generic" event handler that will utilize the useReducer hook to manage the state. The issue lies in the fact that the onChange ...
Recently, I have been attempting to include the api_key in the get request parameter using axios Below is the snippet of my code: const instance = axios.create({ baseURL: "https://api.themoviedb.org/3" }); export function crudify(path) { function get ...
My goal is to call an API that only accepts one animal name at a time, but I receive the names of multiple animals in a query separated by commas. To achieve this, I plan to call the API once for each animal, push the JSON data into an array, and then resp ...
I'm facing an issue with a problem and need some assistance to resolve it. Currently, I am attempting to utilize Ajax urlencode in PHP, but the POST content is not being displayed by PHP as expected when HTML is sent directly to PHP. The following c ...
Currently, I am in the process of scraping data from a specific webpage. The focus is on extracting the return string value from a Javascript function snippet. The target value to be extracted is indicated as "2227885" https://i.sstatic.net/5dLJ ...
I've encountered an issue with the code snippet below. I'm attempting to utilize remotePatterns in my next.config.js file to enable external images. Strangely, when I set the port to an empty string "", it functions correctly. However, specifying ...
Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...