feat: add color pickers

color.js

@@ -69,6 +69,24 @@ _.prototype = {
 		return 'rgb' + (this.alpha < 1? 'a' : '') + '(' + this.rgba.slice(0, this.alpha >= 1? 3 : 4).join(', ') + ')';
 	},
 
+  /**
+ * @param {boolean} withAlpha If the output should include the alpha channel.
+ * @returns {string} A hex color string in the format `#RRGGBB` or `#RRGGBBAA.
+ */
+  toHex: function(withAlpha = true) {
+    var [ r, g, b, a ] = this.rgba;
+    var uint8ToHex = function(uint8) { return uint8.toString(16).padStart(2, '0'); }
+
+    var result = `#${uint8ToHex(r)}${uint8ToHex(g)}${uint8ToHex(b)}`;
+
+    if (withAlpha) {
+      var aHex = uint8ToHex(a * 255);
+      result += aHex;
+    }
+
+    return result;
+  },
+
 	clone: function() {
 		return new _(this.rgba);
 	},

contrast-ratio.js

@@ -6,8 +6,12 @@ function $$(expr, con) {
 	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
 }
 
-// Make each ID a global variable
-// Many browsers do this anyway (it’s in the HTML5 spec), so it ensures consistency
+/*
+ * Make each element with an ID a global variable.
+ * Many browsers do this anyway (it’s in the HTML5 spec), so it ensures consistency.
+ *
+ * https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object
+ */
 $$("[id]").forEach(function(element) {
 	window[element.id] = element;
 });
@@ -72,7 +76,7 @@ function rangeIntersect(min, max, upper, lower) {
 }
 
 function updateLuminance(input) {
-	var luminanceOutput = $(".rl", input.parentNode);
+	var luminanceOutput = $(".rl", input.parentNode.parentNode);
 
 	var color = input.color;
 
@@ -102,7 +106,7 @@ function update() {
 		}
 
 		var contrast = background.color.contrast(foreground.color);
-console.log(contrast);
+
 		updateLuminance(background);
 		updateLuminance(foreground);
 
@@ -260,11 +264,34 @@ background.oninput =
 foreground.oninput = function() {
 	var valid = colorChanged(this);
 
-	if (valid) {
-		update();
+	if (!valid) {
+		return;
+	}
+
+	update();
+
+	if (this === background) {
+		var bgStyle = getComputedStyle(backgroundDisplay).backgroundColor;
+		backgroundColorPicker.value = new Color(bgStyle).toHex(false);
+	}
+	else {
+		var fgStyle = getComputedStyle(foregroundDisplay).backgroundColor;
+		foregroundColorPicker.value = new Color(fgStyle).toHex(false);
 	}
 };
 
+backgroundColorPicker.oninput = (event) => {
+	background.value = event.target.value;
+	colorChanged(background);
+	update();
+};
+
+foregroundColorPicker.oninput = function(event) {
+	foreground.value = event.target.value;
+	colorChanged(foreground);
+	update();
+};
+
 swap.onclick = function() {
 	var backgroundColor = background.value;
 	background.value = foreground.value;
@@ -274,6 +301,12 @@ swap.onclick = function() {
 	colorChanged(foreground);
 
 	update();
+
+	var bgStyle = getComputedStyle(backgroundDisplay).backgroundColor;
+	backgroundColorPicker.value = new Color(bgStyle).toHex(false);
+
+	var fgStyle = getComputedStyle(foregroundDisplay).backgroundColor;
+	foregroundColorPicker.value = new Color(fgStyle).toHex(false);
 };
 
 window.encodeURIComponent = (function(){

index.html

@@ -14,13 +14,19 @@ <h1><a href="#"><div><span>Contrast</span></div> <div><strong>ratio</strong></di
 
 <label class="background">
 	<span>Background:</span>
-	<input id="background" value="white" autofocus />
+	<div class="input-wrapper">
+		<input id="background" class="text-input" value="white" autofocus />
+		<input id="backgroundColorPicker" class="color-picker" type="color" tabindex="-1" />
+	</div>
 	<output for="background foreground" class="rl" aria-live="polite" aria-label="Relative Luminance"></output>
 </label>
 
 <label class="foreground">
 	<span>Text color:</span>
-	<input id="foreground" value="hsla(200,0%,0%,.7)" />
+	<div class="input-wrapper">
+		<input id="foreground" class="text-input" value="hsla(200,0%,0%,.7)" />
+		<input id="foregroundColorPicker" class="color-picker" type="color" tabindex="-1" />
+	</div>
 	<output for="background foreground" class="rl" aria-live="polite" aria-label="Relative Luminance"></output>
 </label>
 

style.css

@@ -88,7 +88,7 @@ label {
 		}
 
 
-	input {
+	.text-input {
 		position: relative;
 		display: block;
 		min-width: 8em;
@@ -103,6 +103,12 @@ label {
 		box-shadow: .05em .1em .2em rgba(0,0,0,.4) inset;
 	}
 
+		.input-wrapper {
+			position: relative;
+			display: flex;
+			align-items: center;
+		}
+
 		input#background {
 			padding-right: 2em;
 			margin-right: -.1em;
@@ -116,6 +122,22 @@ label {
 			border-radius: 0 .3em .3em 0;
 		}
 
+		.color-picker {
+			position: absolute;
+			height: 5ch;
+			margin: 0;
+			padding: 0;
+			width: 5ch;
+		}
+
+		#foregroundColorPicker {
+			right: -7ch;
+		}
+
+		#backgroundColorPicker {
+			left: -7ch;
+		}
+
 .contrast {
 	display: block;
 	position: relative;