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

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 >
  
  <div > 
    <div >
      <span >50</span>
      <span >50</span>
      <span >#000</span>
    </div> 
    
    <div >
      <span >100</span>
      <span >100</span>
      <span >#000</span>
    </div>
    
    <div >
      <span >200</span>
      <span >200</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >300</span>
      <span >300</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >400</span>
      <span >400</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >500</span>
      <span >500</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >600</span>
      <span >600</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >700</span>
      <span >700</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >800</span>
      <span >800</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >900</span>
      <span >900</span>
      <span >#000</span>
    </div>
  </div> 
  
  <div > 
    <div >
    
    </div>
  </div> 
  
  <div > 
    <div >
    
    </div>
  </div> 
  
</div>

CodePudding user response：

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.

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 >
  
  <div > 
    <div >
      <span >50</span>
      <span >50</span>
      <span >#000</span>
    </div> 
    
    <div >
      <span >100</span>
      <span >100</span>
      <span >#000</span>
    </div>
    
    <div >
      <span >200</span>
      <span >200</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >300</span>
      <span >300</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >400</span>
      <span >400</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >500</span>
      <span >500</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >600</span>
      <span >600</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >700</span>
      <span >700</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >800</span>
      <span >800</span>
      <span >#000</span>
    </div>
    
     <div >
      <span >900</span>
      <span >900</span>
      <span >#000</span>
    </div>
  </div> 
  
  <div > 
    <div >
    
    </div>
  </div> 
  
  <div > 
    <div >
    
    </div>
  </div> 
  
</div>