Posted By

jatkins on 03/15/10


Tagged

DOM dhtml color picker


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

dje
moore68


JavaScript Color Picker


 / Published in: JavaScript
 

Public Domain. Can be slow in IE. Tested on Safari, IE8&7, Opera, and Firefox.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Color Picker</title>
  6. <script type="text/javascript">
  7. <!--
  8. var mouseDown = 0;
  9.  
  10. function get(elmnt) {
  11. return document.getElementById(elmnt);
  12. }
  13.  
  14. function addPicker(id, red, green, blue, width) {
  15. if(id=='picker') {
  16. get('selectedColor').style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  17. }
  18. for(i=0;i<=width;i++) {
  19. line = document.createElement('div');
  20. if(i>20&&i<200) {
  21. red--;
  22. green--;
  23. blue--;
  24. }
  25. if(id!='picker') {
  26. line.className = 'colorPicker';
  27. line.id = 'clr'+red+'_'+green+'_'+blue;
  28. }
  29. line.style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  30. line.onmousedown = function() {
  31. mouseDown = 1;
  32. return false;
  33. };
  34. line.onmouseup = function() {
  35. mouseDown = 0;
  36. return false;
  37. };
  38. line.onmousemove = function() {
  39. if(mouseDown==1) {
  40. if(this.className=='colorPicker') {
  41. color = this.id.substring(3).split('_');
  42. get('selectedColor').style.backgroundColor = this.style.backgroundColor;
  43. get('selectedColor').innerHTML = this.style.backgroundColor;
  44. redrawPicker(color[0], color[1], color[2]);
  45. }
  46. else {
  47. get('selectedColor').style.backgroundColor = this.style.backgroundColor;
  48. get('selectedColor').innerHTML = this.style.backgroundColor;
  49. }
  50. }
  51. return false;
  52. };
  53. get(id).appendChild(line);
  54. }
  55. }
  56.  
  57. function redrawPicker(red, green, blue) {
  58. for(i=0;i<get('picker').childNodes.length;i++) {
  59. red--;
  60. green--;
  61. blue--;
  62. get('picker').childNodes[i].style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  63. }
  64. }
  65.  
  66. function initialize() {
  67. addPicker('picker', 244, 151, 11, 250);
  68. addPicker('picker1', 255, 0, 0, 100);
  69. addPicker('picker2', 255, 255, 0, 100);
  70. addPicker('picker3', 255, 128, 255, 100);
  71. addPicker('picker4', 128, 0, 128, 100);
  72. addPicker('picker5', 0, 128, 0, 100);
  73. addPicker('picker6', 128, 54, 0, 100);
  74. addPicker('picker7', 0, 0, 255, 100);
  75. addPicker('picker8', 255, 128, 0, 100);
  76. }
  77. -->
  78. </script>
  79. <style type="text/css">
  80. <!--
  81. div#selectedColor {
  82. width: 91px;
  83. height: 79px;
  84. margin-bottom: 3px;
  85. padding: 5px;
  86. text-align: center;
  87. }
  88.  
  89. div#picker div {
  90. width: 130px;
  91. height: 1px;
  92. cursor: crosshair;
  93. }
  94.  
  95. div#pickers {
  96. margin-left: 3px;
  97. }
  98.  
  99. div#pickers div {
  100. clear: left;
  101. cursor: crosshair;
  102. }
  103.  
  104. div#pickers div div {
  105. width: 1px;
  106. height: 20px;
  107. float: left;
  108. clear: none;
  109. }
  110.  
  111. div#shadePicker, div#pickers {
  112. float: left;
  113. }
  114.  
  115. p {
  116. clear: left;
  117. padding-top: 1em;
  118. }
  119. -->
  120. </style>
  121. </head>
  122. <body onload="initialize();">
  123. <div>
  124. <h1>Color Picker</h1>
  125. <div id="shadePicker">
  126. <div id="picker"></div>
  127. </div>
  128. <div id="pickers">
  129. <div id="selectedColor"></div>
  130. <div id="picker1"></div>
  131. <div id="picker2"></div>
  132. <div id="picker3"></div>
  133. <div id="picker4"></div>
  134. <div id="picker5"></div>
  135. <div id="picker6"></div>
  136. <div id="picker7"></div>
  137. <div id="picker8"></div>
  138. </div>
  139. <p>Public Domain.</p>
  140. </div>
  141. </body>
  142. </html>

Report this snippet  

You need to login to post a comment.