Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript

This article is a very important article. I mean in this Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript we are going to know very clearly about this. We hope you like this article. Please comment if you liked this article.

Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript

Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<div class="container">
  <div class="title">RGB to Hex Color Converter</div>
  <div class="red">
    <div class="label">R</div>
    <div class="slidecontainer">
      <input type="range" min="0" max="255" value="0" class="slider" id="myRange">
    </div>
    <div class="number">0</div>
  </div>
  <div class="green">
    <div class="label">G</div>
    <div class="slidecontainer">
      <input type="range" min="0" max="255" value="0" class="slider" id="myRange">
    </div>
    <div class="number">0</div>
  </div>
  <div class="blue">
    <div class="label">B</div>
    <div class="slidecontainer">
      <input type="range" min="0" max="255" value="0" class="slider" id="myRange">
    </div>
    <div class="number">0</div>
  </div>
  <div class="hex">#000000</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
body {
  background-color: #000000;
  color: #000000;
  font-weight: bold;
}

.title {
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 15px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.red, .green, .blue {
  display: flex;
  margin-bottom: 5px;
}

.red .label, .red .number {
  background-color: red;
}
.green .label, .green .number{
  background-color: green;
}
.blue .label, .blue .number{
  background-color: blue;
}

.label, .number {
  border-radius: 5px;
  text-align: center;
  margin: 5px 10px;
}

.label {
  width: 26px;
}

.number {
  width: 50px;
}

.slidecontainer {
  display: flex;
}

.hex {
  font-size: 3em;
  background-color: rgba(255,255,255,0.3);
  width: 225px;
  text-align: center;
  border-radius: 5px;
}
const selectColor = document.querySelector('.container')

selectColor.addEventListener('input', (event) => {
  let target = event.target
  const result = target.value
  target.parentElement.nextElementSibling.innerHTML = result
  
  let redHex = document.querySelector('.red .number').innerHTML
  let greenHex = document.querySelector('.green .number').innerHTML
  let blueHex = document.querySelector('.blue .number').innerHTML
  redHex = Number(redHex).toString(16).toUpperCase()
  greenHex = Number(greenHex).toString(16).toUpperCase()
  blueHex = Number(blueHex).toString(16).toUpperCase()
  if (redHex.length < 2) {
    redHex = 0 + redHex
  }
  if (greenHex.length < 2) {
    greenHex = 0 + greenHex
  }
  if (blueHex.length < 2) {
    blueHex = 0 + blueHex
  }
  
document.querySelector('.hex').innerHTML = `#${redHex}${greenHex}${blueHex}`

document.body.style.backgroundColor = document.querySelector('.hex').innerHTML

})

Read Also: Build a Advanced Color Palette Converter Web App in Browser Using Vanilla Javascript

Final Words

Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript We have clearly identified the information you need through the article. If in doubt please let us know your doubts via the comment box Thank you.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment