How To Create Simple Color Picker

Submitted by alpha_luna on Saturday, April 9, 2016 - 16:28.
A color picker is a color tool or it’s a color application that usually found on the internet, which the users allows choosing the color that he/she want. In this tutorial, we are going to learn about on How To Create Simple Color Picker. In this example, we’re using CSS style to display the color board. By clicking the respective color in the board we are using jQuery CSS function to pick and apply the colors to the empty space.

HTML

This is HTML code for displaying color board to pick your color that you want. We have four example colors. Before applying the color 
  1. <div id="colorPicker_frame">
  2. 	<div class="color_board" id="red" onClick="chooseColor(this.id);">Red</div>
  3. 	<div class="color_board" id="yellow" onClick="chooseColor(this.id);">Yellow</div>
  4. 	<div class="color_board" id="green" onClick="chooseColor(this.id);">Green</div>
  5. 	<div class="color_board" id="black" onClick="chooseColor(this.id);">Black</div>		
  6.  
  7. 	<div id="empty_board" onClick="transferColor();">Click to Apply Color</div>
  8. 	<div id="cursor_control"></div>
  9. </div>

CSS

And this is the CSS styles. 
  1. <style type="text/css">
  2. #cursor_control {
  3. 	position: absolute;
  4. 	left: 0;
  5. 	height: 20px;
  6. 	width: 20px;
  7. 	border:#000 5px solid;
  8. 	border-radius:20%;
  9. }
  10. .color_board {
  11. 	padding:15px;
  12. 	width:50px;
  13. 	height:200px;
  14. 	float:left;
  15. 	margin:1px;
  16. 	border:whitesmoke 5px solid;
  17. 	}
  18. #black {
  19. 	background:black;
  20. 	color:white;
  21. 	}
  22.  
  23. #green {
  24. 	background:green;
  25. 	color:white;
  26. 	}
  27.  
  28. #yellow {
  29. 	background:yellow;
  30. 	}
  31.  
  32. #red {
  33. 	background:red;
  34. 	}
  35. #empty_board {
  36. 	float:left;
  37. 	padding:15px;
  38. 	height:200px;
  39. 	width:250px;
  40. 	border:#000 5px solid;
  41. 	}
  42. </style>

jQuery Script

This is the script that we are going to use in this tutorial. 
  1. <script type="text/javascript">
  2. 	var tryColorPicker = document.getElementById("colorPicker_frame");
  3. 	tryColorPicker.addEventListener('mousemove',function(event) {			
  4. 		$("#cursor_control").css({'top':event.pageY+'px','left':event.pageX+'px'});	
  5. 	});
  6. 	function transferColor(){
  7. 		$("#empty_board").css('background-color',$("#cursor_control").css('background-color'));
  8. 	}
  9. 	function chooseColor(id){
  10. 		$("#cursor_control").css('background-color',id);	
  11. 	}
  12. </script>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Hope you find this useful. Thank you.

Tags

Add new comment

About text formats
  • 112 views