ColourPicker

In this example below you will see how to do a ColourPicker with some HTML / CSS and Javascript

Simple colour picker with an hexa colour code. www.theoserrano.com

Thumbnail
This awesome code was written by birkof, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright birkof ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ColourPicker</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<html >
  <head>
    <meta charset="UTF-8">
    <title>Couleur Théo SERRANO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-latest.js"/></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
     <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
    
        <link rel="stylesheet" href="css/style.css">

    
    
    
  </head>

  <body>

 <div class="background">
<div class="absolute-center">
<input id="hex" class="hextext" type="text" minlength="0" maxlength="7" />
<div class="refresh">
<a href="#"<i class="fa fa-4x fa-repeat" aria-hidden="true"></i></a>
</div>  
</div>
</div>

    

        <script src="js/index.js"></script>

    
    
    
  </body>
</html>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/birkof/colourpicker-EyQVYj */
html body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
.background {
	width: 100%;
	height: 100%;
	position: absolute;
	vertical-align: middle;
}

#hex {
	color: white;
	font-family: 'Lato', Helvetiva, Arial, sans-serif;
	text-align: center;
	font-size: 4.5em;
	display: block;
	min-width: 200px;
	font-weight: 100;
}

.absolute-center {
	/*width: 50%;*/
  	margin: auto;
  	position: absolute;
  	top: 50%; left: 50%;
  	-webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

input {
	background-color: transparent;
	outline: none;
	border: 0;
	text-align: center;
	width: 5.2em;
}

.hextext {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.7em;
	font-weight: 300;
	color: #fff;
}




a {
	margin-top:50px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
    color: #ffffff;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    position: relative;
    cursor: pointer;
}

/*Downloaded from https://www.codeseek.co/birkof/colourpicker-EyQVYj */
$(function() {
	var timer;
	initialiseHexGen();


	$(".refresh").click(function(event) {
		event.stopPropagation();
		var randomHex = getRandomHex();
		var fontColour = getFontColourForHex(randomHex.replace("#", ""));
		$(".hextext").val(randomHex.toString().toUpperCase());
		$(".hextext").attr("style", "color: " + fontColour + "; border-bottom: 1px dashed " + fontColour);
		$("a").css("color", fontColour);
		$("div.background").css("background-color", randomHex );
	});

	$(".hextext").click(function(event) {
		event.stopPropagation();
	});

	$(".hextext").keyup(function() {
		var isValid = validate(this.value);

		if (isValid && this.value.indexOf("#") > -1) {
			var fontColour = getFontColourForHex(this.value.replace("#", ""));
			$("div.background").css("background-color", this.value );
			$("#" + this.parentElement.id).attr("style", "background-color: " + this.value);
			$(this).attr("style", "color: " + fontColour + "; border-bottom: 1px dashed " + fontColour);
		} else if (isValid) {
			var fontColour = getFontColourForHex(this.value.replace("#", ""));
			$("#" + this.parentElement.id).attr("style", "background-color: #" + this.value);
			$(this).attr("style", "color: " + fontColour + "; border-bottom: 1px dashed " + fontColour);
		}
	});
});

function initialiseHexGen() {
	$("div.background").each(function() {
		var randomHex = getRandomHex();
		var fontColour = getFontColourForHex(randomHex.replace("#", ""));
		$(".hextext").val(randomHex.toString().toUpperCase());
		$(".hextext").attr("style", "color: " + fontColour + "; border-bottom: 1px dashed " + fontColour);
		$("div.background").css("background-color", randomHex );
		
	});
}

function getRandomHex() {
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
}

function validate(hex) {
	return validateHex(hex);
}

function validateHex(hex) {
	return hex.match(/^#?[a-f0-9]{6}$/i) !== null;
}

function getFontColourForHex(hexcolor) {
	var r = parseInt(hexcolor.substr(0, 2), 16);
	var g = parseInt(hexcolor.substr(2, 2), 16);
	var b = parseInt(hexcolor.substr(4, 2), 16);
	var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
	return (yiq >= 128) ? "#000000" : "#ffffff";
}

Comments