JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
	<form ng-controller="myCtrl" novalidate>
        R:<input ng-model="redChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        G:<input ng-model="greenChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        B:<input ng-model="blueChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        <br><br>
        hex: #<input ng-model="hexColor" ng-change="updateChannels()" type="text" required></input>
    </form>
</div>

JavaScript

function rgbToHex(r, g, b) {
    console.group("rgbToHex Fn");
    if (typeof r === "number" &&
        typeof g === "number" &&
        typeof b === "number") {
        console.log("r,g,b are all numbers");
        console.log(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1));
        console.groupEnd();
        return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    } else {
        console.log("r,g,b are not all numbers");
        console.groupEnd();
        return '';
    }
}

function hexToRgbArray(hex) {
    if (hex === undefined) {
        console.log("hex is undefined");
        return ['','',''];
    } else if (hex === '') {
        console.log("hex is empty string");
        return ['','',''];
    } else {
      console.group("hexToRgbArray Fn: hex is " + hex);

      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      console.log("result is " + result);

      if (result) {
        console.log("parseInt(result[1], 16) is " + parseInt(result[1], 16));
        console.log("parseInt(result[2], 16) is " + parseInt(result[2], 16));
        console.log("parseInt(result[3], 16) is " + parseInt(result[3], 16));
        console.groupEnd();
        return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16) ];
      } else {
         console.groupEnd();
         return ['','',''];
      }
    }
}

function myCtrl($scope) {
    $scope.redChannel = 100;
    $scope.greenChannel = 100;
    $scope.blueChannel = 100;

    $scope.updateHex = 
                  function() {
                      console.group("A channel model has changed");
                      $scope.hexColor = rgbToHex($scope.redChannel, $scope.greenChannel, $scope.blueChannel)
                      console.groupEnd();
                  };
    $scope.updateHex();
    $scope.updateChannels = 
                  function() {
                    console.group("hexColor model has changed");
                    console.log('hexColor...