⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Color Picker Input Tutorial

Published : November 16, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury

Learn to program the color picker interface into your HTML web documents and tie it to JavaScript for processing.

<!DOCTYPE html>
<html>
<head>
<script>
function processData(c1,c2) {
	var cv1 = document.getElementById(c1).value;
	var cv2 = document.getElementById(c2).value;
	alert(cv1+"n"+cv2);
	// send the values to server storage if needed
}
</script>
</head>
<body>
<h2>HTML5 Color Picker + Javascript Tutorial</h2>
Choose Color 1: <input type="color" name="color1" id="color1"><br /><br />
Choose Color 2: <input type="color" name="color2" id="color2"><br /><br />
<input type="button" onClick="processData('color1','color2')" value="Submit" />
</body>
</html>
▲