Â« Â»

When users click a specified button, this JavaScript code example will get colours of all HTML elements with the predefined color attributes then fill those colours into many tiny rectangles. The author built this JavaScript color picker with the idea to offer visitors color of any HTML element without researching the source code of web pages.

Try more JavaScript code examples on jsB@nk for picking the colors if you're needing something like that:

- Tigra Color Picker
- Milonic DHTML Color Picker
- JSwitch Color Picker
- HTML Color Picker 1.0

Label: JavaScript color picker, color picker, HTML color picker, hex color picker, web color picker, online color picker, color picker HTML, CSS color picker

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

mootools.js

Copy All x2

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

.dcolor  {
  height:40px;
}

.dtext {
  }

.dwrapper {
  width:100px;
  float:left;
  padding:10px;
  margin:0 20px 20px 0;
  border:1px solid #ccc;
}
</style>

Copy All x2

<script type="text/javascript" src="/javascript/mootools.js"></script>
<script type="text/javascript">
// Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/
// This script downloaded from www.JavaScriptBank.com

//once the dom is ready
window.addEvent('domready', function() {

	//do it!
	$('get-colors').addEvent('click', function() {
		//starting the colors array
		var colors = [];
		var disallows = ['transparent'];

		//for every element
		$$('*').each(function(el) {
			//record colors!
			colors.include(el.getStyle('color'));
			colors.include(el.getStyle('background-color'));
			el.getStyle('border-color').split(' ').each(function(c) {
				colors.include(c);
			});
		});

		//sort the colors
		colors.sort();

		//empty wrapper
		$('colors-wrapper').empty();

		//for every color...
		colors.each(function(val,i) {

			//if it's good
			if(!disallows.contains(val))
			{

				//create wrapper div
				var wrapper = new Element('div', {
					'class':'dwrapper'
				});

				//create color div, inject
				var colorer = new Element('div', {
					'class':'dcolor',
					'style': 'background:' + val
				});
				colorer.inject(wrapper);

				//alert(val);

				//create text div, inject
				var texter = new Element('div', {
					'class':'dtext',
					'text':val
				});
				texter.inject(wrapper);

				//inject wrapper
				wrapper.inject($('colors-wrapper'));
			}
		});
	});
});
</script>

Copy All x2

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<input type="button" id="get-colors" value="Get Colors" class="button">
<br><br><br>
<div id="colors-wrapper"></div>

<br clear="all">

<div style="text-align: left; width: 70%;">
<p>
Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p>

</div>