HEX to RGBA Converter

HEX to RGBA Converter Tutorial

HTML

<div class="container">
     <div class="converter">
       <div class="heading">Hex to RGBA</div>
       <div class="content">
         <div class="wrapper section-1">
           <div class="inputGroup">
             <input type="text" placeholder="HEX" id="hex" />
           </div>
           <div class="inputGroup">
             <input type="text" placeholder="RGBA" id="rgb" />
           </div>
         </div>
         <div class="switch section-2">
           <button><i class="material-icons"> cached </i></button>
         </div>
       </div>
       <div class="bottomContent">
         <div class="bars">
         <div class="barContainer red">
           <div class="bar"><span></span></div>
           <div class="percentage">0%</div>
         </div>
         <div class="barContainer green">
           <div class="bar"><span></span></div>
           <div class="percentage">0%</div>
         </div>
         <div class="barContainer blue">
           <div class="bar"><span></span></div>
           <div class="percentage">0%</div>
         </div>
       </div>
       </div>
     </div>
   </div>

SCSS

$background: #6dbe50;
$cardBackground: #0e0e0e;
$textColor:#fbbd2e;
$speed:0.5s;
body {
  background-color: $background;
  transition: all ease $speed;
}
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.converter{
  padding:rem(20px) rem(60px) rem(30px);
  background-color: $cardBackground;
  width:rem(350px);
  display: inline-flex;
  flex-direction:column;
  border-radius:rem(6px);
  box-shadow:0px 4px 20px rgba(0,0,0,0.75);
  .heading{
    color:$textColor;
    text-align:center;
    font-size:rem(26px);
    margin-bottom:rem(10px);
    text-transform:uppercase;
    font-variant:small-caps;
  }
  .content{
    display: flex;
    justify-content: space-between;
    .wrapper{
      display: flex;
      flex-direction:column;
      flex-basis:90%;
      .inputGroup{
        margin:rem(10px) 0;
        input{
          display: flex;
          width: 100%;
          box-sizing:border-box;
          font-size:rem(18px);
          padding:rem(8px);
          outline:0;
          background-color: lighten($textColor,20%);
          border:none;
          border-radius:rem(2px);
          &::placeholder{
            color:darken($textColor,40%);
          }
        }
      }
      &.toggle{
        .inputGroup:first-child{
          order:2;
        }
      }
    }
    .switch{
      margin:rem(10px) 0;
      display: flex;
      margin-left:rem(4px);
      flex-basis:10%;
      button{
        border:none;
        background-color: $textColor;
        color:darken($textColor,30%);
        border-radius:rem(2px);
        outline:0;
        transition:all ease $speed;
        &:hover{
          background-color: darken($textColor,10%);
          cursor:pointer;
        }
      }
    }
  }
  
  .bottomContent{
    .bars{
      display: flex;
      flex-direction:column;
      margin-top:rem(10px);
      .barContainer{
        display: flex;
        margin:rem(1px) 0;
        align-items: center;
        justify-content: center;
        .bar{
          flex-basis:90%;
          height:rem(6px);
          border-radius:rem(1px);
          background-color: lighten($textColor,20%);
          position:relative;
          overflow:hidden;
          span{
            position:absolute;
            background-color: red;
            width: 0;
            height: 100%;
            transition:all ease $speed;
          }
        }
        .percentage{
          flex-basis:10%;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-left:rem(4px);
          color:$textColor;
        }
        
        
        &.red{
            span{
              background-color: #ff0000;
            }
          }
          &.blue{
            span{
              background-color: #0000ff;
            }
          }
        &.green{
          span{
            background-color: #00ff00;
          }
        }
      }
    }
  }
  
  
}

CSS

body {
  background-color: #6dbe50;
  transition: all ease 0.5s;
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.converter {
  padding: rem(20px) rem(60px) rem(30px);
  background-color: #0e0e0e;
  width: rem(350px);
  display: inline-flex;
  flex-direction: column;
  border-radius: rem(6px);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.75);
}
.converter .heading {
  color: #fbbd2e;
  text-align: center;
  font-size: rem(26px);
  margin-bottom: rem(10px);
  text-transform: uppercase;
  font-variant: small-caps;
}
.converter .content {
  display: flex;
  justify-content: space-between;
}
.converter .content .wrapper {
  display: flex;
  flex-direction: column;
  flex-basis: 90%;
}
.converter .content .wrapper .inputGroup {
  margin: rem(10px) 0;
}
.converter .content .wrapper .inputGroup input {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  font-size: rem(18px);
  padding: rem(8px);
  outline: 0;
  background-color: #fddd92;
  border: none;
  border-radius: rem(2px);
}
.converter .content .wrapper .inputGroup input::placeholder {
  color: #5b4002;
}
.converter .content .wrapper.toggle .inputGroup:first-child {
  order: 2;
}
.converter .content .switch {
  margin: rem(10px) 0;
  display: flex;
  margin-left: rem(4px);
  flex-basis: 10%;
}
.converter .content .switch button {
  border: none;
  background-color: #fbbd2e;
  color: #8d6303;
  border-radius: rem(2px);
  outline: 0;
  transition: all ease 0.5s;
}
.converter .content .switch button:hover {
  background-color: #f1aa05;
  cursor: pointer;
}
.converter .bottomContent .bars {
  display: flex;
  flex-direction: column;
  margin-top: rem(10px);
}
.converter .bottomContent .bars .barContainer {
  display: flex;
  margin: rem(1px) 0;
  align-items: center;
  justify-content: center;
}
.converter .bottomContent .bars .barContainer .bar {
  flex-basis: 90%;
  height: rem(6px);
  border-radius: rem(1px);
  background-color: #fddd92;
  position: relative;
  overflow: hidden;
}
.converter .bottomContent .bars .barContainer .bar span {
  position: absolute;
  background-color: red;
  width: 0;
  height: 100%;
  transition: all ease 0.5s;
}
.converter .bottomContent .bars .barContainer .percentage {
  flex-basis: 10%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: rem(4px);
  color: #fbbd2e;
}
.converter .bottomContent .bars .barContainer.red span {
  background-color: #ff0000;
}
.converter .bottomContent .bars .barContainer.blue span {
  background-color: #0000ff;
}
.converter .bottomContent .bars .barContainer.green span {
  background-color: #00ff00;
}

JAVASCRIPT

$(document).ready(function() {
  $(".converter .switch button").on("click", function() {
    $(".wrapper").toggleClass("toggle");
  });

  var hexInput = $(".wrapper .inputGroup #hex");
  var rgbInput = $(".wrapper .inputGroup #rgb");

  var colorsArray = [
    $(".barContainer.red"),
    $(".barContainer.green"),
    $(".barContainer.blue")
  ];

  $(".wrapper .inputGroup input").on("input", function(e) {
    var color = tinycolor(this.value);
    if (color.isValid()) {
      $("body").css({ "background-color": color });
      /**
       * if it is hex input set rgb input else set hex input
       */
      this.id == "hex"
        ? rgbInput.val(color.toRgbString())
        : hexInput.val(color.toHexString());
      var colorPercentages = color.toPercentageRgb();
      /* set rgb percentages */

      $(colorsArray).each(function(index, element) {
        var amount = colorPercentages[Object.keys(colorPercentages)[index]];
        $(element)
          .find("span")
          .css("width", amount);
        $(element)
          .find(".percentage")
          .text(amount);
      });
    } else {
      $("body").css({ "background-color": "#6dbe50" });
      this.id == "hex" ? rgbInput.val("") : hexInput.val("");
      $(colorsArray).each(function(index, element) {
        $(element)
          .find("span")
          .css("width", 0);
        $(element)
          .find(".percentage")
          .text(0 + "%");
      });
    }
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *