HEX to 16bit RGB-565 Color

by Daniel Cheung

HTML

<div id="app">
  <h1>HEX to 16bit RGB-565 Color</h1>
  <p>
    <label>24-bit Hex Input</label>
    <input v-model="input" @keyup="updateColor()">
  </p>
  <div class="color-box" :style="{'background-color': hexColor}"></div>
  <p>Bin: <code>{{outputHex}}</code></p>
  <p>Hex: <code>{{outputBinary}}</code></p>
  <div class="color-box" :style="{'background-color': outputHexColor}"></div>
</div>

CSS

.color-box {
  width: 50px;
  height: 50px;
  margin: 20px;
  border: 1px solid #333;
}

* {
  font-family: "Open Sans", "Roboto", san-serif;
}

code {
  font-family: "Fira Code", "Consolas", monospaced;
}

JavaScript

let app = new Vue({
	el: "#app",
  data: {
    input: "",
    outputDec: 0,
    hexColor: "",
    outputHexColor: ""
  },
  methods: {
    updateColor() {
      //get individual color
      let colorString = this.input.replace("#", "");
      this.hexColor = "#" + colorString;
      let red = colorString.substr(0, 2);
      let green = colorString.substr(2, 2);
      let blue = colorString.substr(4, 2);
      
      if (colorString.length === 3) {
          red = colorString[0];
          green = colorString[1];
          blue = colorString[2];
      		red = red + red;
          green = green + green;
          blue = blue + blue;
      }
      
      let r = Math.round(parseInt(red, 16)/255*0b11111);
      let g = Math.round(parseInt(green, 16)/255*0b111111);
      let b = Math.round(parseInt(blue, 16)/255*0b11111);
      
      this.outputHexColor = `rgb(${r*255/31}, ${g*255/63}, ${b*255/31})`;
      
      this.outputDec = r << 11 ^ g << 5 ^ b;
    },
    
  },
  computed: {
    outputBinary() {
    	return "0x" + this.outputDec.toString(16).toUpperCase();
    },
    outputHex() {
      return "0b" + this.outputDec.toString(2).toUpperCase();
    }
  }
});