diff --git a/chameleon-client/src/plugins/ColorPicker.js b/chameleon-client/src/plugins/ColorPicker.js
index 061b2fb04..bba09292a 100644
--- a/chameleon-client/src/plugins/ColorPicker.js
+++ b/chameleon-client/src/plugins/ColorPicker.js
@@ -8,6 +8,11 @@ function initColorPicker() {
     canvas.height = image.height;
 }
 
+//Called on click of the image,
+//Finds X,Y of the mouse on the image,
+//Draws the image on the (invisible) canvas
+//Reads the color values (pixelData) in X,Y of the canvas
+//calls the function to handle the button (either eyedrop,expand or shrink)
 function colorPickerClick(event, currentFunction, currentRange) {
     let rect = image.getBoundingClientRect();
     let x = Math.round(event.clientX - rect.left);
@@ -23,13 +28,11 @@ function colorPickerClick(event, currentFunction, currentRange) {
 
 function eyeDrop(pixel) {
     let hsv = RGBtoHSV(pixel);
-    let range = createRange([hsv]);
-    range = widenRange(range);
+    range = widenRange([hsv,hsv.slice(0)]);//sends hsv and a copy of hsv
     return range
 }
 
 function expand(pixel, currentRange) {
-
     let hsv = RGBtoHSV(pixel);
     let widenHSV = widenRange([[].concat(hsv), hsv]);
     return createRange(currentRange.concat(widenHSV));
@@ -38,12 +41,12 @@ function expand(pixel, currentRange) {
 function shrink(pixel, currentRange) {
     let hsv = RGBtoHSV(pixel);
     let widenHSV = widenRange([[].concat(hsv), hsv]);
-
-    if (!shrinkRange(currentRange, widenHSV[0]))
-        shrinkRange(currentRange, widenHSV[1]);
+    if (!shrinkRange(currentRange, widenHSV[0]))//Tries to shrink the lower part of the widen HSV
+        shrinkRange(currentRange, widenHSV[1]);//If the prev attempt failed, try to shrink the higher part of the widen HSV
     return currentRange
 }
 
+//numbers is an array of 3 rgb values, returns array for 3 hsv values
 function RGBtoHSV(numbers) {
     let r = numbers[0],
         g = numbers[1],
@@ -67,6 +70,7 @@ function RGBtoHSV(numbers) {
     return [Math.round(H), Math.round(S), Math.round(V)];
 }
 
+//Loops though the colors array, finds the smallest and biggest value for H,S and V. Returns the range containing every color
 function createRange(HSVColors) {
     let range = [[], []];
     for (var i = 0; i < 3; i++) {
@@ -80,6 +84,7 @@ function createRange(HSVColors) {
     return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
 }
 
+//This function adds 10 extra units to each side of the sliders, not to be confued with the expand selection button
 function widenRange(range) {
     let expanded = [[], []];
     for (let i = 0; i < 3; i++) {
@@ -91,19 +96,22 @@ function widenRange(range) {
     return expanded;
 }
 
+//If color in range then take the closer range value to color and set it to color plus or minus 10
+//For example if hmax is 200 hmin is 100 and color's h is 120 range will become [130,200]
 function shrinkRange(range, color) {
+
     let inside = true;
-    for (let i = 0; i < color.length && inside; i++) {
+    for (let i = 0; i < color.length && inside; i++) {//Check if color is in range
         if (!(range[0][i] <= color[i] <= range[1][i]))
             inside = false;
     }
+
     if (inside) {
         for (let j = 0; j < color.length; j++) {
             if (color[j] - range[0][j] < range[1][j] - color[j])
                 range[0][j] = Math.min(range[0][j] + 10, range[1][j]);//shrink from min side
             else
                 range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
-
         }
     }
     return inside;//returns if color is inside or not