Edit Question - KnowledgeHub

Title Body

I am not at all versed in Computer Graphics and am in need of creating a color picker as a javascript tool to embed in an HTML page. First, and looking at Photoshop's one, i thought of the RGB palette as a three-dimensional matrix. My first attempt envolved: <script type="text/javascript"> var rgCanvas = document.createElement('canvas'); rgCanvas.width = 256; rgCanvas.height = 256; rgCanvas.style.border = '3px solid black'; for (g = 0; g < 256; g++){ for (r = 0; r < 256; r++){ var context = rgCanvas.getContext('2d'); context.beginPath(); context.moveTo(r,g); context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)'; context.lineTo(r+1,g+1); context.stroke(); context.closePath(); } } var bCanvas = document.createElement('canvas'); bCanvas.width = 20; bCanvas.height = 256; bCanvas.style.border = '3px solid black'; for (b = 0; b < 256; b++){ var context = bCanvas.getContext('2d'); context.beginPath(); context.moveTo(0,b); context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')'; context.lineTo(20, b); context.stroke(); context.closePath(); } document.body.appendChild(rgCanvas); document.body.appendChild(bCanvas); </script> this results in something like My thought is this is too linear, comparing to the ones i see in Photoshop and on the web. I would like to know the logic behind the color mapping in a picker like this: I don't really need the algorythms itself, i'm mainly trying to understand the logic.

Tags (comma-separated) Cancel