Build a RGBA to HEX Color Converter in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building RGBA to HEX color converter in vanilla javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

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

 

 

 

style.css

 

 

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;
}

 

See also  Build a Traffic Light in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

script.js

 

 

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

})

Leave a Reply