jQuery

Fast colour selector

Works with:
FF3
Chrome
Opera
Safari

Update

This project has been updated! Click here to see Version 2 of the Colour Selector.

Description

This is a fast 16bit colour chooser. Because there are soo many of them out there and I can finally tick it off my list. You can also resize all of the components without any loss of colour precision (except loss of quality in the raster images used) as the selection is 'per pixel' in a sense. Doesn't work in IE fully yet due to IE's lack of support for pngs and transparency issues.

Demo

*
-

Red:
Green:
Blue:

JavaScript

  1. $(".colour_selector").ready(function() {
  2.     $(".colour_selector").each(function(i) {
  3.         //controls
  4.         var colour_chooser = $(this).find(".colour_chooser");
  5.         var brightness_changer = $(this).find(".brightness_changer");
  6.         var colour_preview = $(this).find(".colour_preview");
  7.         var hue_image = colour_chooser.find(".hue_image");
  8.         var colour_cursor = colour_chooser.find(".colour_cursor");
  9.         var brightness_cursor = brightness_changer.find(".brightness_cursor");
  10.        
  11.         var span_red_value = $(this).find(".red_value");
  12.         var span_green_value = $(this).find(".green_value");
  13.         var span_blue_value = $(this).find(".blue_value");
  14.        
  15.         //variables
  16.         var lightness = 1.0, hue = 0.0, saturation = 0.0;
  17.         var red=0, green=0, blue=0;
  18.         var mouseDown = false;
  19.        
  20.         //when ready
  21.         updateColourDisplay();
  22.        
  23.         //methods
  24.         brightness_changer.select(function() { $(this).blur(); });
  25.         brightness_changer.bind("mousedown",function(event) { mouseDown=true; changeBrightness(event, $(this)); });
  26.         brightness_changer.find(".drag_plane").bind("mousemove",function(event) { if (mouseDown) changeBrightness(event, $(this)); });
  27.         brightness_changer.bind("mouseup",function() { mouseDown=false; });
  28.  
  29.         function changeBrightness(mouseEvent, obj) {
  30.             yPos = (mouseEvent.pageY-obj.offset().top);
  31.             if (yPos<0) yPos=0;
  32.             if (yPos>obj.height()) yPos=obj.height();
  33.            
  34.             brightness_cursor.css("top", yPos);
  35.            
  36.             lightness = (yPos/obj.height());
  37.            
  38.             var newColour = Math.floor(lightness*256.0);
  39.             colour_chooser.css("background-color","rgb(" + newColour + "," + newColour + "," + newColour + ")");
  40.             hue_image.css("opacity", lightness);
  41.            
  42.             updateColourDisplay();
  43.         }
  44.  
  45.         colour_chooser.bind("mousedown" ,function(event) { mouseDown=true; changeColour(event, $(this)); });
  46.         colour_chooser.find(".drag_plane").bind("mousemove" ,function(event) { if (mouseDown) changeColour(event, $(this)); });
  47.         colour_chooser.bind("mouseup" ,function(event) { mouseDown=false; });
  48.        
  49.         function changeColour(mouseEvent, obj) {
  50.             xPos = (mouseEvent.pageX-obj.offset().left);
  51.             yPos = (mouseEvent.pageY-obj.offset().top);
  52.            
  53.             colour_cursor.css("top", yPos);
  54.             colour_cursor.css("left", xPos);
  55.  
  56.             hue = (xPos/obj.width()) * 360.0
  57.             saturation = yPos/obj.height();
  58.            
  59.             updateColourDisplay();
  60.         }
  61.        
  62.         function updateColourDisplay() {
  63.             var newColour = hsvToRGB(hue, saturation, lightness);
  64.             red = newColour[0];
  65.             green = newColour[1];
  66.             blue = newColour[2];
  67.            
  68.             colour_preview.css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
  69.            
  70.             span_red_value.text(red);
  71.             span_green_value.text(green);
  72.             span_blue_value.text(blue);
  73.         }
  74.     });
  75. });
  76.  
  77. function hsvToRGB(hue, saturation, value) {
  78.     var newColour = new Array(3);
  79.     var temp = hue/60.0;
  80.     var hueRange = Math.floor(temp) % 6;
  81.     var hueRemainder = temp - Math.floor(temp);
  82.    
  83.     var part1 = Math.floor(value * (1.0-saturation) * 256.0);
  84.     var part2 = Math.floor(value * (1.0- hueRemainder*saturation) * 256.0);
  85.     var part3 = Math.floor(value * (1.0-(1.0-hueRemainder)*saturation) * 256.0);
  86.     var value = Math.floor(value * 256.0);
  87.    
  88.     switch (hueRange) {
  89.         case 0: newColour=[value,part3,part1]; break;
  90.         case 1: newColour=[part2,value,part1]; break;
  91.         case 2: newColour=[part1,value,part3]; break;
  92.         case 3: newColour=[part1,part2,value]; break;
  93.         case 4: newColour=[part3,part1,value]; break;
  94.         case 5: default: newColour=[value,part1,part2];
  95.     }
  96.    
  97.     return newColour;
  98. }

CSS

  1. html, body {
  2.     height: 100%;
  3. }
  4.  
  5. .hue_image,
  6. .brightness_image {
  7.     position: absolute;
  8.     width: 100%;
  9.     height: 100%;
  10.     z-index: 0;
  11. }
  12.  
  13. .colour_chooser,
  14. .brightness_changer,
  15. .colour_preview {
  16.     float: left;
  17.     border: 1px solid black;
  18.     margin: 5px;
  19.     overflow: hidden;
  20. }
  21.  
  22. .colour_chooser {
  23.     clear: left;
  24.     background: white top left no-repeat;
  25.     width: 256px;
  26.     height: 256px;
  27.     padding: 0px;
  28.     cursor: crosshair;
  29. }
  30.  
  31. .brightness_changer {
  32.     background: white top left repeat-x;
  33.     width: 10px;
  34.     height: 256px;
  35.     cursor: s-resize;
  36. }
  37.  
  38. .colour_preview {
  39.     width: 26px;
  40.     height: 26px;
  41.     clear: right;
  42.     background-color: white;
  43. }
  44.  
  45. .colour_cursor,
  46. .brightness_cursor {
  47.     position: absolute;
  48.     top: 0px;
  49.     left: 0px;
  50. }
  51.  
  52. .colour_cursor {
  53.     width: 8px;
  54.     height: 8px;
  55. }
  56.  
  57. .brightness_cursor {
  58.     width: 10px;
  59.     height: 5px;
  60.     bottom: 0px;
  61.     top: auto;
  62. }
  63.  
  64. .drag_plane {
  65.     width: 100%;
  66.     height: 100%;
  67.     position: absolute;
  68.     z-index: 100;
  69. }

XHTML

  1. <div class="colour_selector">
  2.     <div class="colour_chooser"><div class="drag_plane"></div><img class="hue_image" src="hue_plane.png" alt="" /><img class="colour_cursor" src="cursor.gif" alt="*" /></div>
  3.     <div class="brightness_changer"><div class="drag_plane"></div><img class="brightness_image" src="brightness.jpg" alt="" /><img class="brightness_cursor" src="slider.gif" alt="-" /></div>
  4.     <div class="colour_preview"></div>
  5.     <p style="float: left;">
  6.         Red: <span class="red_value"></span><br />
  7.         Green: <span class="green_value"></span><br />
  8.         Blue: <span class="blue_value"></span>
  9.     </p>
  10. </div>