How to get hex color code from css and automatically display in div?

Question

I am designing a color palette for my website. What I'm trying to do is get the color code from the css to the <span class = "hexcode"> hex of css </span> tag

Let me explain: when I set a certain color in the css for example .color.b50 {background: # E9F1FD; }, I want the span tag to automatically acquire the value of .color.b50 to show me as code. This way I would avoid having to manually put the code in the span tag each time.

As I will have many colors this will save me time.

Is it possible to do this with js or jQuery?

.global-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.global-box {
  display: flex;
  flex-direction: column;
}

.label {
  margin-top: 10px;
}

.color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50);
  gap: 20px;
}

/*List of Color*/

.color.b50  { background: #E9F1FD; }
.color.b100 { background: #C0D7F9; }
.color.b200 { background: #98BDF6; }
.color.b300 { background: #6FA4F2; }
.color.b400 { background: #478AEF; }
.color.b500 { background: #1E70EB; }
.color.b600 { background: #1A62CE; }
.color.b700 { background: #1754B0; }
.color.b800 { background: #134693; }
.color.b900 { background: #0F3876; }

<div class="main-container">
  
  <div class="global-row"> 
    <div class="global-box">
      <span class="color b50">50</span>
      <span class="label">50</span>
      <span class="hexcode">#000</span>
    </div> 
    
    <div class="global-box">
      <span class="color b100">100</span>
      <span class="label">100</span>
      <span class="hexcode">#000</span>
    </div>
    
    <div class="global-box">
      <span class="color b200">200</span>
      <span class="label">200</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b300">300</span>
      <span class="label">300</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b400">400</span>
      <span class="label">400</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b500">500</span>
      <span class="label">500</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b600">600</span>
      <span class="label">600</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b700">700</span>
      <span class="label">700</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b800">800</span>
      <span class="label">800</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b900">900</span>
      <span class="label">900</span>
      <span class="hexcode">#000</span>
    </div>
  </div> 
  
  <div class="row-2"> 
    <div class="global-box">
    
    </div>
  </div> 
  
  <div class="row-3"> 
    <div class="global-box">
    
    </div>
  </div> 
  
</div>

If you use `.css()` to get the computed style property for 'background', be aware that *different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).* https://api.jquery.com/css/ — Twisty, Jun 21 '22 at 14:19
I'm not 100% sure what you're trying to do as it looks like you already have the output you need (and you have an accepted answer anyway). You can do this with CSS instead of js/jquery - but you'll still need to put the "50" in the css instead. Here's an example: https://jsfiddle.net/6soh7k4m/ **edit** realise now that it's the hex number that's incomplete, not the 50. — freedomn-m, Jun 21 '22 at 15:27

toffler · Accepted Answer · 2022-06-22T05:26:28.663

You can get CSS properties using .css()

However, you only get the background color in rgb, so you have to convert it in hex first. I used the answer of this SO question to convert the data via

const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;.

Finally, loop over your elements and add the generated hex code to the last silbling.

  const $colors = $('.color');

  $colors.each(function(index, elem) {
     let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase();
     $(elem).siblings(":last").text(css);
  });

Enjoy.

const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;

$(document).ready(function(){
  const $colors = $('.color');
  
  $colors.each(function(index, elem) {
    let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase();
    $(elem).siblings(":last").text(css);
  });
  
  
});

.global-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.global-box {
  display: flex;
  flex-direction: column;
}

.label {
  margin-top: 10px;
}

.color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50);
  gap: 20px;
}

/*List of Color*/

.color.b50  { background: #E9F1FD; }
.color.b100 { background: #C0D7F9; }
.color.b200 { background: #98BDF6; }
.color.b300 { background: #6FA4F2; }
.color.b400 { background: #478AEF; }
.color.b500 { background: #1E70EB; }
.color.b600 { background: #1A62CE; }
.color.b700 { background: #1754B0; }
.color.b800 { background: #134693; }
.color.b900 { background: #0F3876; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  
  <div class="global-row"> 
    <div class="global-box">
      <span class="color b50">50</span>
      <span class="label">50</span>
      <span class="hexcode">#000</span>
    </div> 
    
    <div class="global-box">
      <span class="color b100">100</span>
      <span class="label">100</span>
      <span class="hexcode">#000</span>
    </div>
    
    <div class="global-box">
      <span class="color b200">200</span>
      <span class="label">200</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b300">300</span>
      <span class="label">300</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b400">400</span>
      <span class="label">400</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b500">500</span>
      <span class="label">500</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b600">600</span>
      <span class="label">600</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b700">700</span>
      <span class="label">700</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b800">800</span>
      <span class="label">800</span>
      <span class="hexcode">#000</span>
    </div>
    
     <div class="global-box">
      <span class="color b900">900</span>
      <span class="label">900</span>
      <span class="hexcode">#000</span>
    </div>
  </div> 
  
  <div class="row-2"> 
    <div class="global-box">
    
    </div>
  </div> 
  
  <div class="row-3"> 
    <div class="global-box">
    
    </div>
  </div> 
  
</div>

How to get hex color code from css and automatically display in div?

1 Answers1