Posted By

jatkins on 07/28/14


Tagged

color graphics colors picker colorpicker


Versions (?)

Color Picker


 / Published in: HTML
 

Released into the public domain (including the embedded color picker image -- you will have to copy the code from the Pastebin inside background:url() on line 48) by Josh Atkins.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="utf-8">
  4. <title>Color Picker</title>
  5. <script type="text/javascript">
  6. //<![CDATA[
  7. function colorPicker() {
  8. var pickerContainerDiv = document.createElement('div'),
  9. pickerDiv = document.createElement('div'),
  10. previewLI = document.createElement('li'),
  11. webColorsUL = document.createElement('ul'),
  12. webColors = [
  13. {name: 'White', hex: 'ffffff', r: 255, g: 255, b: 255},
  14. {name: 'Silver', hex: 'c0c0c0', r: 191, g: 191, b: 191},
  15. {name: 'Gray', hex: '808080', r: 128, g: 128, b: 128},
  16. {name: 'Black', hex: '000000', r: 0, g: 0, b: 0},
  17. {name: 'Red', hex: 'ff0000', r: 255, g: 0, b: 0},
  18. {name: 'Maroon', hex: '800000', r: 128, g: 0, b: 0},
  19. {name: 'Yellow', hex: 'ffff00', r: 255, g: 255, b: 0},
  20. {name: 'Olive', hex: '808000', r: 128, g: 128, b: 0},
  21. {name: 'Lime', hex: '00ff00', r: 0, g: 255, b: 0},
  22. {name: 'Green', hex: '008000', r: 0, g: 128, b: 0},
  23. {name: 'Aqua', hex: '00ffff', r: 0, g: 255, b: 255},
  24. {name: 'Teal', hex: '008080', r: 0, g: 128, b: 128},
  25. {name: 'Blue', hex: '0000ff', r: 0, g: 0, b: 255},
  26. {name: 'Navy', hex: '000080', r: 0, g: 0, b: 128},
  27. {name: 'Fuchsia', hex: 'ff00ff', r: 255, g: 0, b: 255},
  28. {name: 'Purple', hex: '800080', r: 128, g: 0, b: 128}
  29. ];
  30.  
  31. webColorsUL.appendChild(previewLI);
  32. webColorsUL.className = 'webColors';
  33. for(color in webColors) {
  34. var newLI = document.createElement('li'),
  35. newA = document.createElement('a');
  36.  
  37. newA.style.background = '#' + webColors[color].hex;
  38. //newA.style.color = newA.style.background;
  39. newA.href = '#';
  40.  
  41. newA.appendChild(document.createTextNode(webColors[color].name));
  42. newLI.appendChild(newA);
  43. webColorsUL.appendChild(newLI);
  44. }
  45.  
  46. pickerDiv.className = 'pickerDiv';
  47. pickerDiv.style.background = 'url() no-repeat';
  48. pickerDiv.style.width = '320px';
  49. pickerDiv.style.height = '240px';
  50. pickerDiv.style.border = '1px solid black';
  51. pickerDiv.style.cursor = 'crosshair';
  52. pickerDiv.style.position = 'relative';
  53. pickerDiv.style.display = 'inline-block';
  54. pickerDiv.onmousemove = function(e) {
  55. var xPos = e.pageX - pickerDiv.offsetLeft - 1,
  56. yPos = e.pageY - pickerDiv.offsetTop - 1;
  57.  
  58. if(xPos >= 0 && yPos >= 0) {
  59. var columnValue = (xPos / (320 / 7)).toString();
  60. columnValue = columnValue.split(/\./),
  61. columnIndex = parseInt(columnValue[0]);
  62.  
  63. var rainbowColors = [
  64. {r: 255, g: 0, b: 0}, // red
  65. {r: 255, g: 165, b: 0}, // orange
  66. {r: 255, g: 255, b: 0}, // yellow
  67. {r: 0, g: 255, b: 0}, // green
  68. {r: 0, g: 0, b: 255}, // blue
  69. {r: 75, g: 0, b: 130}, // indigo
  70. {r: 238, g: 130, b: 238}, // violet
  71. {r: 255, g: 255, b: 255} // white
  72. ];
  73.  
  74. var startColor = rainbowColors[columnIndex],
  75. endColor = rainbowColors[columnIndex + 1];
  76.  
  77. if(startColor && endColor) {
  78. var rInc = (endColor.r - startColor.r),
  79. gInc = (endColor.g - startColor.g),
  80. bInc = (endColor.b - startColor.b),
  81. howFarIn = parseFloat('0.' + columnValue[1]);
  82.  
  83. colorHoveredOver = {
  84. r: Math.round((startColor.r + rInc * howFarIn) - (yPos + 1) * (1/240) * 255),
  85. g: Math.round((startColor.g + gInc * howFarIn) - (yPos + 1) * (1/240) * 255),
  86. b: Math.round((startColor.b + bInc * howFarIn) - (yPos + 1) * (1/240) * 255)
  87. };
  88.  
  89. previewLI.style.background = 'rgb(' + colorHoveredOver.r + ', ' + colorHoveredOver.g + ', ' + colorHoveredOver.b + ')';
  90. //previewLI.style.borderColor = previewLI.style.background;
  91. }
  92. }
  93. };
  94.  
  95. pickerContainerDiv.appendChild(pickerDiv);
  96. pickerContainerDiv.appendChild(webColorsUL);
  97. document.body.appendChild(pickerContainerDiv);
  98. }
  99.  
  100. function init() {
  101. window.testColorPicker = new colorPicker;
  102. }
  103. //]]>
  104. </script>
  105. <style type="text/css">
  106. /*<![CDATA[*/
  107. div.pickerDiv {
  108. float: left;
  109. }
  110.  
  111. ul.webColors {
  112. list-style: none;
  113. margin: 0;
  114. margin-left: -1px;
  115. padding: 0;
  116. width: 164px;
  117. border: 1px solid black;
  118. border-left: 0;
  119. /*border-radius: 10px;*/
  120. background: #f5f5f5;
  121. float: left;
  122. }
  123.  
  124. ul.webColors li {
  125. display: inline-block;
  126. margin: 0px;
  127. }
  128.  
  129. ul.webColors li a {
  130. display: inline-block;
  131. width: 40px;
  132. height: 40px;
  133. cursor: default;
  134. color: transparent;
  135. border: 1px solid black;
  136. border-right: 0;
  137. border-bottom: 0;
  138. }
  139.  
  140. ul.webColors li:first-child {
  141. display: block;
  142. width: 100%;
  143. height: 76px;
  144. margin: 0px 0px 0px 0px;
  145. margin-bottom: 0;
  146. background: #ffffff;
  147. }
  148. /*]]>*/
  149. </style>
  150. </head>
  151. <body onload="init();">
  152. </body>
  153. </html>

Report this snippet  

You need to login to post a comment.