Can the hexadecimal code for a particular color name be identified?

Similar Question:
Javascript function to convert color names to hex codes

Is there a way to determine the hexadecimal value of a named color that is currently being used by the browser? For example, I would like to achieve something similar to this:

(HTML):

<div id="container" style="background-color: lightgreen"></div>

(JavaScript):

var container = document.getElementById("container");
var colorAsHex = getHexColor(container, "background-color");

Ideally, I am looking for a jQuery solution that I might be overlooking. Otherwise, I am open to browser-specific workarounds as long as it is compatible with the major browsers.

javascriptjquerycssdomcolors

Answer №1

The use of <a href="http://jsfiddle.net/KnW4X/" rel="nofollow">link</a> in the example proves that $('div').css('background-color') is functioning correctly.

Answer №2

let color = "lightgreen";
let rgbColor = $("<div></div>").css("background-color", color).css("background-color");
let matches = rgbColor.match(/(\d+),\s*(\d+),\s*(\d+)/);
let value =
    (+matches[1] << 16) +
    (+matches[2] << 8) +
    (+matches[3] << 0);
let hexValue colorsum.toString(16);
while (hexValue .length < 6) {
    hexValue = "0" + hexValue;
}
console.log("#" + hexValue)

See a live demonstration here and here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

show additional worth on the console

Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...

javascriptjqueryhtmlangularjstypescript

Using AngularJS to connect a directive with a controller function

After updating my records, I am looking to trigger a controller function from a directive. Below is the code snippet being used: Controller.js app.controller('GetAlphabetical', function ($scope, $http) { function getCutomers() { ...

jqueryangularjsangularjs-directive

Mastering the art of effectively capturing and incorporating error data

Is there a way to retain and add information to an Error object in typescript/javascript without losing the existing details? Currently, I handle it like this: try { // code that may throw an error } catch (e) { throw new Error(`Error while process ...

javascripttypescriptexception

Display MySQL information in a tabular format with segmented sets of data

My goal is to retrieve data from a MySQL table and present it in a table format. Currently, I am using individual queries for each cell as shown below: $sql = "SELECT Sum(combined_data.`List Price`) AS total_dollar_amount, Count(combined_data.sysid) AS to ...

phpmysqljquery

Observing Gulp's behavior is quite peculiar - it seems to be running

I ran into a rather peculiar issue with gulp watch. In my system, I have two disk drives: D and E. Disk D is a section of my computer's hard disk drive, while disk E is a flash drive. Both disks contain a file named test.txt: D:\test\test ...

javascriptnode.jsgulpgulp-watch

Display the keys of a nested array in Vue.js when the structure is unknown

Here is a representation of a dynamic array I have: nodes: [ { n1: "Foods", }, { n4: "Drinks", b7: [ { a2: "Beers", a4: [ ...

javascriptvue.js

Binding data to a dropdown menu

I'm working on a jQuery function that retrieves all teams from a service. How can I bind this data to a select box? function FetchTeams() { $.support.cors = true; var jqxhr = $.getJSON('http://localhost/Service.svc/GetTe ...

jqueryselectjquery-mobileknockout.js

It is not feasible to establish a personalized encoding while sending a post request through XMLHTTPRequest

When using the JS console in the latest version of Chrome browser, I encountered the following issue: x = new XMLHttpRequest(); x.open('POST', '?a=2'); x.setRequestHeader('Content-Type', 'application/ ...

javascriptajaxencodingutf-8xmlhttprequest

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

There seems to be an issue as req.files in Sails.js is blank and the value of req

I've been struggling with this problem for quite some time now. Despite my efforts to find a solution through Google and StackOverFlow, I have not been successful. The issue lies within a project I am working on, where I have implemented a "Product" M ...

javascriptnode.jsexpresssails.js

What is the best way to compare two arrays that have elements of different data types?

Can someone help me compare two arrays in TypeScript to see if they are identical? I'm having trouble with the current code. Here's what I have: let props:(string|boolean)[]=['abc','def',true,false,'xyz'] let propsCo ...

javascriptarraystypescriptcompare

Troubles arise when attempting to utilize yarn for my projects

Whenever I enter the command yarn start in the terminal, I get this output: yarn run v1.22.4 $ react-scripts start 'react-scripts' is not recognized as an internal or external command, operable program or batch file. error Command fai ...

javascriptreactjsnpmyarnpkg

Display/Conceal Dropdown Menu for Combobox Using only Javascript

In my asp.net user control, I am generating markup that looks like this: <div id="combobox1"> <div id="combobox1_text"><span>combobox 1</span></div> <div id="combobox1_ddl"> <input type="checkbox" id="combobo ...

javascriptasp.netcomboboxuser-controls

What is the best way to display cards next to each other on desktop and mobile devices while maximizing available space?

In the world of React components, there exists a card representation within a grid view that adapts based on available screen space; function EngineerCard(engineer: EngineerDetail) { return ( <div className='engineerCard'> <d ...

htmlcssreactjs

Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...

cssuser-interfacereactjsmaterial-ui

the reason for the blurring of shadows in Three.js

Typically, the shadow appears as shown below: https://i.sstatic.net/5L9N2.png However, upon adjusting the parameters of directionalLight.shadow.camera directionalLight.shadow.camera.left = -50 directionalLight.shadow.camera.right = 50 directionalLight.s ...

javascriptthree.js

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

When trying to insert JavaScript into the console, a section of the code fails to execute

In this code snippet, I am fetching the most common English words from Wikipedia, extracting all the words from the page, and then filtering out the commonly used words: // get table data from most common words var arr = []; $.ajax({ url: 'https:/ ...

javascriptjquerygoogle-chrome

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform