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>>Solution :
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 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>