Lightweight JavaScript color picker

**CWA** · 01-21-2010 11:09 PM

Here is a simple free color picker written in JavaScript that produces 216 colors and the hex code for the color selected. I wrote it for a project and thought that someone might find it useful. I tested it on Firefox, IE and Chrome which are all compatible. Click here for an example

* This code is provided for free. If you like or use it, a link to this post would be appreciated (but you are under no obligation to do so)

Code:

<html>
<head>
<style type="text/css">
<!--
.border-rb {
    cursor:pointer;
    height:15px;
    width:15px;
    border-right: solid black 1px;
    border-bottom: solid black 1px;
    font-size:1px;
}
.border-lt {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
.border-t {
    border-top: 1px solid #000;
    border-left: 1px none #000;
}
.div_color_preview {
    background-color: #FFFFFF; 
    width: 50px; 
    height: 50px; 
    border: 1px solid #000;
}
-->
</style>
</head>
<body>
<input name="txtColor" type="text" id="txtColor" size="7">
<br>
<br>
<div id="div_color_text">Hex code</div>
<br>
<div id="div_color_preview" class="div_color_preview"></div>
<br>
<script type="text/javascript" language="javascript">
<!--
// Written by user CWA, CoolWebAwards.com Forums. 22 January 2010
// http://forum.coolwebawards.com/threads/8-Lightweight-JavaScript-color-picker

function col_preview(c) {
    document.getElementById('div_color_preview').style.cssText = 'background-color: ' + c + '; width: 50px; height: 50px; border: 1px solid #000;';
    document.getElementById('div_color_text').innerHTML  = c;
}

function col_exit(c) {
    document.getElementById('div_color_preview').style.cssText = 'background-color: #FFFFFF; width: 50px; height: 50px; border: 1px solid #000;';
    document.getElementById('div_color_text').innerHTML  = "Hex code";
}

function col_click(c) {
    document.getElementById('txtColor').value = c;
}

document.write('<table width="170" border="0" cellpadding="0" cellspacing="0" style="background-color:black;" ><tr><td width="90"><table border="0" cellpadding="0" cellspacing="0" class="border-lt" >');
var int_count_col1 = 6;
var int_count_col2 = 6;
var int_count = 0;
while (int_count != 36){
    int_count = int_count + 1
    if (int_count_col1 == 1) {str_count_col1 = "00"}
    if (int_count_col1 == 2) {str_count_col1 = "33"}
    if (int_count_col1 == 3) {str_count_col1 = "66"}
    if (int_count_col1 == 4) {str_count_col1 = "99"}
    if (int_count_col1 == 5) {str_count_col1 = "CC"}
    if (int_count_col1 == 6) {str_count_col1 = "FF"}
    if (int_count_col2 == 1) {str_count_col2 = "00"}
    if (int_count_col2 == 2) {str_count_col2 = "33"}
    if (int_count_col2 == 3) {str_count_col2 = "66"}
    if (int_count_col2 == 4) {str_count_col2 = "99"}
    if (int_count_col2 == 5) {str_count_col2 = "CC"}
    if (int_count_col2 == 6) {str_count_col2 = "FF"}
    document.write('<tr><td onMouseOver="col_preview(\'#FF' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#FF' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#FF' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
               '<td onMouseOver="col_preview(\'#CC' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#CC' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#CC' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
               '<td onMouseOver="col_preview(\'#99' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#99' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#99' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
               '<td onMouseOver="col_preview(\'#66' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#66' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#66' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
               '<td onMouseOver="col_preview(\'#33' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#33' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#33' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
               '<td onMouseOver="col_preview(\'#00' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#00' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#00' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td></tr>');    
    if (int_count_col2 == 1){int_count_col1 = int_count_col1 - 1;int_count_col2 = 6;
    }else{int_count_col2 = int_count_col2 - 1}
    if (int_count == 18) {document.write('</table></td><td width="90"><table width="0%" border="0" cellpadding="0" cellspacing="0" class="border-t">');}
    if (int_count == 36) {document.write('</table></td></tr></table>');}
}
-->
</script>
</body>
</html>

**princeg** · 04-27-2011 12:23 PM

It is very helpful and valuable post for javaScript beginners.
Thanks for this brilliant sharing.

**nobita_deptrai** · 07-08-2011 02:13 PM

Graphic designers tend to look at things differently. They see the arrangement and colour scheme of things that mere mortals would just take for granted. Anything can be art, and it takes a discerning eye to really see it sometimes. While taking part in normal computer functions, some designers may see colours that they would like to use in their own projects. Identifying the type of colour can be very difficult, but with Just Color Picker, you can get the exact colour value of any pixel.

**julian** · 08-08-2011 09:25 AM

Fantastic piece of code, very useful. I must say a work of its own class. The best part is getting the hash value in the text field, from there it is easy to copy, and that copied code can easily be used in anyone of the html document. I have been thinking of such kind of code to develop but now I don’t have to, I have saved a lot of time. I have used this code in Internet Explorer, Mozilla FireFox, Google Chrome in every browser it works without any problem.

**Watsonreo** · 08-16-2011 10:09 AM

I guess what is happening is that the text is disappearing at the bottom of the page, is that correct? Pop-ups are not very smart when it comes to resize themselves to fit your content, you might try setting the scrollbars = yes, but will shift lower bar too I think, only allows Mozilla individual control of the x, y and scroll bars as far as I know.

**alexinvertir** · 10-10-2011 10:21 PM

Thanks for this code. I had been experimenting with other libraries that I found, but all they gave me errors. This code works perfectly for what I do.
One question: is difficult to extend the table to display more colors?

Thread: Lightweight JavaScript color picker

Thread Tools

Display

Lightweight JavaScript color picker

Tags for this Thread

Posting Permissions