<body>

<table id="tool">
	<tr><td>
		<h4>Background Color</h4>
		<p>The bottom layer of color.</p>

			<form class="form-horizontal" role="form">
				 <div class="form-group">

					<label for="background-color--r" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">R:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-1">
						<input type="text" class="form-control color-picker-option rgb-background-color" id="background-color--r" maxlength="3" value="">
					</div>

					<label for="background-color--g" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">G:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-2">
						<input type="text" class="form-control color-picker-option rgb-background-color" id="background-color--g" maxlength="3" value="">
					</div>

					<label for="background-color--b" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">B:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-3">
						<input type="text" class="form-control color-picker-option rgb-background-color" id="background-color--b" maxlength="3" value="">
					</div>

					<input id="rgb-background-color" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 colorblock" disabled>

				</div>
			</form>
	</td></tr>

	<!-- Start of target color section -->
	<tr><td>
		<h4>Target Color</h4>
		<p>The desired color of the object to be manipulated.</p>

			<form class="form-horizontal" role="form">
				 <div class="form-group">

					<label for="target-color--r" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">R:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-1">
						<input type="text" class="form-control color-picker-option rgb-target-color" id="target-color--r" maxlength="3" value="">
					</div>

					<label for="target-color--g" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">G:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-2">
						<input type="text" class="form-control color-picker-option rgb-target-color" id="target-color--g" maxlength="3" value="">
					</div>

					<label for="target-color--b" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">B:</label>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-3">
						<input type="text" class="form-control color-picker-option rgb-target-color" id="target-color--b" maxlength="3" value="">
					</div>

					<input id="rgb-target-color" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 colorblock" disabled>

				</div>
			</form>
	</tr></td>

	<!-- Start of overlay color section -->

	<tr><td>
		<h4>Overlay Color</h4>
		<p>The default color at 100% opacity of the object to be manipulated.</p>

		<form class="form-horizontal" role="form">
			 <div class="form-group">

				<label for="overlay-color--r" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">R:</label>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-1">
					<input type="text" class="form-control color-picker-option rgb-overlay-color" id="overlay-color--r" maxlength="3" value="">
				</div>

				<label for="overlay-color--g" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">G:</label>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-2">
					<input type="text" class="form-control color-picker-option rgb-overlay-color" id="overlay-color--g" maxlength="3" value="">
				</div>

				<label for="overlay-color--b" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label">B:</label>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 field-3">
					<input type="text" class="form-control color-picker-option rgb-overlay-color" id="overlay-color--b" maxlength="3" value="">
				</div>

				<input id="rgb-overlay-color" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 colorblock" disabled>

			</div>
		</form>
	</tr></td>

	<!-- Start of opacity section -->

	<tr><td>
		<h4>Overlay Opacity</h4>
		<p>The calculated opacity of the overlay color to achieve the target color.</p>
			<form class="form-horizontal" role="form">
				<div class="form-group">
					<div class="col-xs-2"col-sm-2 col-md-2 col-lg-2  style="width:120px;">
						<input type="text" class="form-control" id="rgb-opacity" maxlength="4" value="">
					</div>
				<div><label for="opacity" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label percent">%</label></div>
				</div>
				</form>
	</tr></td>
	<tr><td>
		<p class="error">Error. Your inputs are likely not feasible.</p>
		<a href="#" style="display:block"><div class="calculate"><h3>CALCULATE</h3></div></a>
		<a href="#" style="display:block"><div class="reset">CLEAR</div></a>
	</tr></td>
</table>


<script src="app.js"></script>
body {
	font-size:16px;
	margin: 0;
	padding: 0;
}
#colors {
	border-collapse:collapse;
	border:2px solid #545454;
	font-family: Monaco, 'Courier New', monospace;
}
#colors td, #colors tr {
	padding:4px 20px 4px 20px;
}
#colors th {
	color:#545454;
	text-align: left;
	vertical-align: bottom;
}
.field-1 {
	margin-left:-10px;
	margin-right:0px;
	width:82px;
}
.field-2 {
	margin-left:-10px;
	margin-right:0px;
	width:82px;
}
.field-3 {
	margin-left:-10px;">
	margin-right:20px;
	width:82px;
}

.colorblock {
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	height:34px;
	margin-left:20px;
	width:34px;
}

.box {
	border: 1px solid #ccc;
}

#tool {
	border-collapse:collapse;
	margin: 10px 0px 0px 0px;
	width:460px;
}

#tool tr, #tool td {
	border: 1px solid #CCCCCC;
	padding: 30px 20px 30px 20px;
}

#tool p {
	margin-bottom:20px;
}

h3 {
	margin:10px 0px 10px 0px;
	padding:0px;
}

h4 {
	font-size:16px;
	font-weight:bold;
	margin-bottom:4px;
	margin-top:0px;
}

input {
	font-family: Monaco, 'Courier New', monospace;
}

.form-group {
	margin:0px;
}

.percent {
	font-weight:bold;
	margin-left:-20px;
}

.tabs {
	width:460px;
}

.nav-tabs {
	border-bottom:0px;
	border-color:#ccc;
	border-left:1px;
	border-right:1px;
	border-style:solid;
	border-top: 1px;
}

.nav-tabs>li>a {
	border:0px;
	border-radius:0px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0px;
}

.calculate, .calculate:hover {
	text-align: center;
}

.reset, .reset:hover {
	font-weight:600;
	text-align: center;
}

a:hover{
	text-decoration: none;
}

.error {
	color: #D9534F;
	font-weight: 600;
	text-align: center;
}  

var COLOR = {
	showError: function() {
		this.$error.fadeIn();
	},

	hideError: function() {
		this.$error.fadeOut();
	},

	rgbToHex: function (R,G,B) {
		if (!R && !G && !B) return;

		var toHex =  function (n) {
			n = parseInt(n,10);
			if (isNaN(n)) return "00";
			n = Math.max(0,Math.min(n,255));
			return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
		};

		return toHex(R)+toHex(G)+toHex(B);
	},

	setup: function() {
		this.vars();
		this.binds();

		this.$error.hide();
	},

	vars: function() {
		this.$body    = $('body');
		this.$blocks  = $('.colorblock');
		this.$options = $('.color-picker-option');
		this.$submit  = $('.calculate');
		this.$reset   = $('.reset');
		this.$form    = $('form');
		this.$error   = $('.error');
	},

	binds: function() {
		this.$options.on('blur focus', this.updateColor.bind(this));
		this.$blocks.on('change', function(){alert('awesome');});
		this.$submit.on('click', this.calculate.bind(this));
		this.$reset.on('click', this.reset.bind(this));
	},

	reset: function() {
		this.$error.fadeOut();
		this.$form.each(function(){
			this.reset();
		});
		this.$blocks.css('background-color', '#fff');
	},

	updateColor: function(e) {
		var $item = $(e.currentTarget);

		if ($item.val() != '') {
			var className        = $item.attr('class');
			var targetClassName  = '.' + className.substr(className.lastIndexOf(" ") + 1);
			var $targets         = $(targetClassName);
			var $closestColorBox = $targets.eq(0).parents('.form-group').find('.colorblock');
			var color;

			if ($item.val() > 255) $item.val(255);
			if ($item.val() < 0) $item.val(0);

			// Assign color values to other inputs
			$targets.val(Math.round($item.val()));

			color = this.rgbToHex($targets.eq(0).val(), $targets.eq(1).val(), $targets.eq(2).val());

			$closestColorBox.css('background-color', '#'+color);
		}
	},

	calculate: function(e) {
		e.preventDefault();

		var $row1 = $('#background-color--r').parents('.form-group').find('.color-picker-option');
		var $row2 = $('#target-color--r').parents('.form-group').find('.color-picker-option');
		var $row3 = $('#overlay-color--r').parents('.form-group').find('.color-picker-option');
		var $row4 = $('#rgb-opacity');
		var result;

		if ($row1.val() && $row2.val() && $row3.val()) {
			$row4.val(100*(($row2.val() - $row1.val()) / ($row3.val() - $row1.val())));
		}
		else if ($row1.val() && $row2.val() && $row4.val()) {
			$row3.val(Math.round(($row2.val() - (1 - ($row4.val()/100)) * $row1.val()) / ($row4.val()/100)));
			$row3.trigger('blur');
		}
		else if ($row1.val() && $row3.val() && $row4.val()) {
			$row2.val(Math.round((($row4.val()/100) * $row3.val()) + (1 - ($row4.val()/100)) * $row1.val()));
			$row2.trigger('blur');
		}
		else if ($row2.val() && $row3.val() && $row4.val()) {
			$row1.val(Math.round(($row2.val() - ($row4.val()/100) * $row3.val()) / (1 - ($row4.val()/100))));
			$row1.trigger('blur');
		}

		if (
			($row1.val() > 255 || $row1.val() < 0) ||
			($row2.val() > 255 || $row2.val() < 0) ||
			($row3.val() > 255 || $row3.val() < 0) ||
			($row4.val() > 100 || $row4.val() < 0)
		) {
			this.showError();
		} else {
			this.hideError();
		}
	}

};

COLOR.setup();

External CSS

  1. http://viget.com/cache/assets/13795342247346515e99c9401ba4855cd0354211ad.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js