diff --git a/css/style.css b/css/style.css
index 22d87e0..09bbe06 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,4 @@
 #square {
-	background-color: blue;
 	cursor: pointer;
 	float: left;
 	height: 30px;
@@ -28,7 +27,8 @@
 
 #colors-wrapper {
 	display: inline-block;
-	margin-bottom: 10px;
+	margin: 0 0 10px 3px;
+	width: 100%;
 }
 
 #colors-wrapper > div {
diff --git a/scripts/ColorPicker/app.js b/scripts/ColorPicker/app.js
index f4c0747..7c8cee6 100644
--- a/scripts/ColorPicker/app.js
+++ b/scripts/ColorPicker/app.js
@@ -1,8 +1,11 @@
 define([
 	'backbone',
 	'ColorPicker/models/ColorPickerModel',
-	'ColorPicker/views/ColorPickerView'
-], function (Backbone, ColorPickerModel, ColorPickerView) {
+	'ColorPicker/views/ColorPickerView',
+	'ColorPicker/collections/CollectionColor',
+	'ColorPicker/views/ColorSquareView',
+	'ColorPicker/models/ColorModel'
+], function (Backbone, ColorPickerModel, ColorPickerView, CollectionColor, ColorSquareView, ColorModel) {
 
 	var ColorPicker = function (params) {
 		this.initialize(params);
@@ -26,24 +29,18 @@ define([
 	};
 	
 	p.render = function () {
+		var that = this;
+		
 		this.colorPickerView.render();
 				
-		$('#miniSquare > div').hover(function () {
-			var thisColor = $(this).attr('data-color-rgb');
-			
-			$('#square').css({
-				'background-color': thisColor
-			});
-			$('#rgb input[type=text]').val(thisColor);
-		}, function () {
-			var defaultColor = $('#square').attr('data-color');
+		this.colorPickerModel.get('colorsCollection').each(function (color) {
+			var thisViewColor = new ColorSquareView({
+				model: color,
+				parentView: that.colorPickerView
+			});		
 			
-			$('#square').css({
-				'background-color': defaultColor
-			});
-			$('#rgb input[type=text]').val(defaultColor);
+			$('#colors-wrapper').append(thisViewColor.render().el);
 		});
-		
 	};
 	
 	return ColorPicker;
diff --git a/scripts/ColorPicker/collections/CollectionColor.js b/scripts/ColorPicker/collections/CollectionColor.js
new file mode 100644
index 0000000..17e5f70
--- /dev/null
+++ b/scripts/ColorPicker/collections/CollectionColor.js
@@ -0,0 +1,21 @@
+define([
+	'backbone',
+	'ColorPicker/models/ColorModel',
+	'ColorPicker/utility/colorHelper'
+], function (Backbone, ColorModel, colorHelper) {
+	var CollectionColor = Backbone.Collection.extend({
+		model: ColorModel,
+		
+		initialize: function () {
+			this.on("add", this.editColor, this);
+		},
+		
+		editColor: function (model, collection, options) {
+			var color = colorHelper.conversionRgb(model.get("rgb"));
+		
+			model.set("cmyk", color.cmyk);
+		}
+	});
+
+	return CollectionColor; 
+});
diff --git a/scripts/ColorPicker/models/ColorModel.js b/scripts/ColorPicker/models/ColorModel.js
new file mode 100644
index 0000000..c527e22
--- /dev/null
+++ b/scripts/ColorPicker/models/ColorModel.js
@@ -0,0 +1,19 @@
+define(['backbone'], function(Backbone) {
+	
+	var ColorModel = Backbone.Model.extend({
+		defaults: {
+			rgb: null,
+			cmyk: null
+		},
+		
+		url: function () {
+			return false;
+		},
+		
+		sync: function () {
+			return false;
+		}
+	});
+	
+	return ColorModel;
+})
diff --git a/scripts/ColorPicker/models/ColorPickerModel.js b/scripts/ColorPicker/models/ColorPickerModel.js
index 20d3035..4340ed5 100644
--- a/scripts/ColorPicker/models/ColorPickerModel.js
+++ b/scripts/ColorPicker/models/ColorPickerModel.js
@@ -1,17 +1,42 @@
-define(['backbone'], function() {
+define([
+	'backbone',
+	'ColorPicker/models/ColorModel',
+	'ColorPicker/collections/CollectionColor',
+	'ColorPicker/views/ColorSquareView'
+], function (Backbone, ColorModel, ColorsCollection, ColorSquareView) {
 
-	var ColorPickerModel = Backbone.Model.extend ({	// model
+	var ColorPickerModel = Backbone.Model.extend ({
 		defaults: {
 			divId: null,
-			defaultColor: "#000000"
+			defaultColorSquare: "#000000",
+			defaultColors: ['#654654', '#456456', '#ff00ae'],
+			currentColorRgb: "#000000",
+			currentColorCmyk: [0, 0, 0, 100],
+			colorsCollection: null
 		},
+		
+		initialize: function () {
+			var that = this;
+			
+			this.set('colorsCollection', new ColorsCollection([]));
+			
+			_.each(this.get('defaultColors'), function (color) {
+				that.get('colorsCollection').add([
+					{
+						rgb: color
+					}
+				]);				
+			});
+		},
+		
 		url: function () {
 			return false;
 		},
+		
 		sync: function () {
 			return false;
 		}
 	});
 	
 	return ColorPickerModel;
-})
\ No newline at end of file
+})
diff --git a/scripts/ColorPicker/templates/inputTemplate.html b/scripts/ColorPicker/templates/inputTemplate.html
index 906dbf7..a069d94 100644
--- a/scripts/ColorPicker/templates/inputTemplate.html
+++ b/scripts/ColorPicker/templates/inputTemplate.html
@@ -1 +1 @@
-<input type="text" id="apparent-input" />
\ No newline at end of file
+<input type="text" id="apparent-input" />
diff --git a/scripts/ColorPicker/templates/mainTemplate.html b/scripts/ColorPicker/templates/mainTemplate.html
index 22edc9a..87c77d5 100644
--- a/scripts/ColorPicker/templates/mainTemplate.html
+++ b/scripts/ColorPicker/templates/mainTemplate.html
@@ -1,19 +1,19 @@
 <div id="color-palette">
 	<div id="colors-wrapper"></div>
 	<label id="rgb">
-		<input type="radio" checked name="typeColor" />
+		<input type="radio" class="radio-button" checked name="typeColor" />
 		<p>RGB (HEX)</p>
-		<input type="text" value="<%= defaultColor %>" data-color="<%= defaultColor %>" maxlength="7" />
+		<input type="text" id="input-rgb" class="text-input" value="<%= currentColorRgb %>" maxlength="7" />
 	</label>
 	<label id="cmyk">
-		<input type="radio" name="typeColor" />
+		<input type="radio" class="radio-button" name="typeColor" />
 		<p>CMYK</p>
 		<div>
-			<input type="text" value="" id="cmyk-input-c" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-m" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-y" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-k" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[0] %>" id="cmyk-input-c" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[1] %>" id="cmyk-input-m" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[2] %>" id="cmyk-input-y" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[3] %>" id="cmyk-input-k" maxlength="3" disabled />
 		</div>
 	</label>
-	<input type="button" name="submit" value="submit" />
+	<input type="button" name="submit" id="submit" value="submit" />
 </div>
diff --git a/scripts/ColorPicker/templates/squareTemplate.html b/scripts/ColorPicker/templates/squareTemplate.html
index b6ae13b..3e6ef74 100644
--- a/scripts/ColorPicker/templates/squareTemplate.html
+++ b/scripts/ColorPicker/templates/squareTemplate.html
@@ -1 +1 @@
-<div id="square" data-color="blue"></div>
\ No newline at end of file
+<div id="square" style="background-color: <%= defaultColorSquare %>"></div>
diff --git a/scripts/ColorPicker/utility/colorHelper.js b/scripts/ColorPicker/utility/colorHelper.js
new file mode 100644
index 0000000..f8b9533
--- /dev/null
+++ b/scripts/ColorPicker/utility/colorHelper.js
@@ -0,0 +1,95 @@
+define(['backbone'], function (Backbone) {
+	var colorHelper = (function () {
+	
+		// PRIVATE
+
+		var decHex;
+		var hexDec;
+		
+		hexDec = function (hex) {
+			var m = hex.slice(1).match(/.{2}/g);
+			
+			m[0] = parseInt(m[0], 16);
+			m[1] = parseInt(m[1], 16);
+			m[2] = parseInt(m[2], 16);
+		
+			return m;
+		};
+		
+		decHex = function (dec) {
+			var arr;
+			var i;
+
+			arr = [
+				(dec[0]).toString(16),
+				(dec[1]).toString(16),
+				(dec[2]).toString(16)
+			]
+			
+			for (i = 0; i < arr.length; i++) {
+				if (arr[i].length === 1) {
+					arr[i] = "0" + arr[i];
+				}			
+			}
+		
+			return arr;
+		};
+		
+		// PUBLIC
+	
+		return {
+			conversionRgb: function (color) {
+				var arr = [0,0,0,1];
+				var c;
+				var k;
+				var m;
+				var rgb;
+				var y;
+				
+				if (color.length === 4) {
+					color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+				}
+
+				rgb = hexDec(color);
+				
+				c = (255 - rgb[0]) / 255;
+				m = (255 - rgb[1]) / 255;
+				y = (255 - rgb[2]) / 255;
+				k = Math.min(c, m, y);
+				
+				if (k !== 1) {
+					arr[0] = Math.round(((c - k)/(1 - k)).toFixed(2) * 100);
+					arr[1] = Math.round(((m - k)/(1 - k)).toFixed(2) * 100);
+					arr[2] = Math.round(((y - k)/(1 - k)).toFixed(2) * 100);
+					arr[3] = Math.round(k.toFixed(2) * 100);
+				}
+				
+				return colorObj = {
+						rgbHex: color,
+						rgb: rgb,
+						cmyk: arr
+					}
+			},
+			
+			conversionCmyk: function (color) {
+				var rgb;
+				var rgbHex;
+				
+				rgb = [
+					Math.round((100 - color[0]) * 2.55),
+					Math.round((100 - color[1]) * 2.55),
+					Math.round((100 - color[2]) * 2.55)
+				];
+
+				rgbHex = decHex(rgb);
+				
+				return colorObj = {
+					rgb: rgb,
+					rgbHex: rgbHex
+				}
+			}
+		};	
+	})();
+	
+	return colorHelper;
+});
diff --git a/scripts/ColorPicker/views/ColorPickerView.js b/scripts/ColorPicker/views/ColorPickerView.js
index 4dea8bd..73e016a 100644
--- a/scripts/ColorPicker/views/ColorPickerView.js
+++ b/scripts/ColorPicker/views/ColorPickerView.js
@@ -2,19 +2,226 @@ define([
 	'backbone',
 	'text!ColorPicker/templates/mainTemplate.html',
 	'text!ColorPicker/templates/inputTemplate.html',
-	'text!ColorPicker/templates/squareTemplate.html'
-], function (Backbone, MainTemplate, InputTemplate, SquareTemplate) {
+	'text!ColorPicker/templates/squareTemplate.html',
+	'ColorPicker/utility/colorHelper'
+], function (Backbone, MainTemplate, InputTemplate, SquareTemplate, colorHelper) {
 
 	var allTemplates = SquareTemplate + InputTemplate + MainTemplate;
-	var ColorPickerView = Backbone.View.extend({
-		initialize: function () {
-		},
-		template: _.template(allTemplates),
+			
+	var ColorPickerView = Backbone.View.extend((function () {
+	
+		// PRIVATE
+		
+		var setColorParams = function (context, rgb, cmyk) {
+			context.$('#rgb input[type=text]').val(rgb);
+			
+			context.$('#cmyk-input-c').val(cmyk[0]);
+			context.$('#cmyk-input-m').val(cmyk[1]);
+			context.$('#cmyk-input-y').val(cmyk[2]);
+			context.$('#cmyk-input-k').val(cmyk[3]);
+			
+			context.$("#square").css({"background-color" : rgb});
+		};
 		
-		render: function () {
-			this.$el.html(this.template(this.model.toJSON()));
-		}
-	})
+		// PUBLIC
+	
+		return {
+			initialize: function () {
+				this.on("updateInput", this.updateInput, this);
+				this.on("setValueModel", this.setValueModel, this);
+				this.on("setNewValueModel", this.setNewValueModel, this);
+			},
+			
+			events: {
+				"change .radio-button": "makeActive",
+				"focus #input-rgb": "validationRgb",
+				"focus #cmyk input[type=text]": "validationCmyk",
+				"click #submit": "setNewcolor",
+				"click #square": "openOrClosePicker"
+			},
+			
+			template: _.template(allTemplates),
+			
+			render: function () {
+				this.$el.html(this.template(this.model.toJSON()));
+				
+				return this;
+			},
+			
+			updateInput: function (cmyk, rgb) {
+				var colorBigSquare = this.model.get("defaultColorSquare");
+				var that = this;
+				
+				setColorParams(that, rgb, cmyk);
+			},
+			/*
+			asd: function () {
+				obj: {
+					odlCmyk:this.model.get("currentColorCmyk") 
+				}
+				return obj;
+				//	oldRgb = this.model.get("currentColorRgb");
+			},
+			*/
+			setValueModel: function () {
+				var cmyk = this.model.get('currentColorCmyk');
+				var rgb = this.model.get('currentColorRgb');
+				var that = this;
+				
+				setColorParams(that, rgb, cmyk);
+			},
+			
+			setNewValueModel: function (cmyk, rgb) {
+				this.model.set("currentColorCmyk", cmyk);
+				this.model.set("currentColorRgb", rgb);
+				this.model.set("defaultColorSquare", rgb);
+				alert("добавилось");
+			},
+			
+			makeActive: function (event) {
+				this.$(".text-input").attr("disabled", "disabled");
+				$(event.currentTarget).parent().find(".text-input").removeAttr("disabled");
+			},
+			/*
+			openOrClosePicker: function () {
+				console.log($("#color-palette").css("display"));
+				console.log(this.asd.oldCmyk);
+
+			},
+			*/
+			testCorrectColorRgb: function (str) {
+				var colorObj;
+				var i;
+				var reg = /[A-Fa-f0-9]/;
+				var strLength;
+			
+				if (str.charAt(0) === '#') {
+					str = str.substring(1);
+				}
+
+				strLength = str.length;
+				
+				if (strLength === 3 || strLength === 6) {
+					for (i = 0; i < strLength; i++) {
+						if (!reg.test(str[i])) {
+							return false;
+						}
+					}
+					
+					return true;
+				}
+				
+				return false;			
+			},
+			
+			testCorrectColorCmyk: function (cmyk) {
+				var i;
+			
+				for (i = 0; i < cmyk.length; i++) {
+					if (isNaN(cmyk[i]) || cmyk[i] > 100 || cmyk[i].length < 1) {
+					
+						return false;
+					}
+				}
+				
+				return true;
+			},
+			
+			validationCmyk: function (event) {
+				var mainThis = this;
+				var that = this.$(event.currentTarget);
+				
+				return that.keydown(function() {
+					return setTimeout(function () {
+						var colorObj;
+						var rgbHex;
+						var valueInput;
+						
+						valueInput = [
+							this.$('#cmyk-input-c').val(),
+							this.$('#cmyk-input-m').val(),
+							this.$('#cmyk-input-y').val(),
+							this.$('#cmyk-input-k').val()
+						];
+						
+						if (!mainThis.testCorrectColorCmyk(valueInput)) {
+						
+							this.$("#square").css({"background-color" : mainThis.model.get("defaultColorSquare")});
+							this.$("#rgb input[type=text]").val(mainThis.model.get("currentColorRgb"));
+
+							return false;
+						}
+
+						colorObj = colorHelper.conversionCmyk(valueInput);
+						rgbHex = "#" + colorObj.rgbHex[0] + colorObj.rgbHex[1] + colorObj.rgbHex[2];
+						
+						if (valueInput[3] === "100") {
+							this.$("#rgb input[type=text]").val("#000000");
+							this.$("#square").css({"background-color" : "#000000"});
+						} else {
+							this.$("#rgb input[type=text]").val(rgbHex);
+							this.$("#square").css({"background-color" : rgbHex});
+						}		
+						
+					}, 10);
+				});
+			},
+			
+			validationRgb: function (event) {
+				var mainThis = this;
+				var that = this.$(event.currentTarget);
+				
+				return that.keydown(function() {
+					return setTimeout(function () {
+						var colorObj;
+						var defaultCmyk = mainThis.model.get("currentColorCmyk");;
+						var valueInput;
+						
+						valueInput = that.val();
+					
+						if (!(valueInput.charAt(0) === '#')) {
+							valueInput = "#" + valueInput;
+						}
+
+						if (mainThis.testCorrectColorRgb(valueInput)) {
+							
+							colorObj = colorHelper.conversionRgb(valueInput);
+
+							setColorParams(this, colorObj.rgbHex, colorObj.cmyk);
+							this.$('#rgb input[type=text]').val(valueInput);
+
+							return true;
+						} else {
+							this.$("#square").css({"background-color" : mainThis.model.get("defaultColorSquare")});
+							
+							this.$("#cmyk-input-c").val(defaultCmyk[0]);
+							this.$("#cmyk-input-m").val(defaultCmyk[1]);
+							this.$("#cmyk-input-y").val(defaultCmyk[2]);
+							this.$("#cmyk-input-k").val(defaultCmyk[3]);
+						}
+						
+					}, 10);
+				});
+			},
+			
+			setNewcolor: function () {
+				// закрыть палетку
+				var cmyk;
+				var rgb = this.$("#rgb input[type=text]").val();
+				
+				cmyk = [
+					this.$('#cmyk-input-c').val(),
+					this.$('#cmyk-input-m').val(),
+					this.$('#cmyk-input-y').val(),
+					this.$('#cmyk-input-k').val()
+				];
+				
+				if (this.testCorrectColorCmyk(cmyk) && this.testCorrectColorRgb(rgb)) {
+					this.setNewValueModel(cmyk, rgb);
+				}
+			}
+		};
+	})());
 	
 	return ColorPickerView;
 })
diff --git a/scripts/ColorPicker/views/ColorSquareView.js b/scripts/ColorPicker/views/ColorSquareView.js
new file mode 100644
index 0000000..3a95cbf
--- /dev/null
+++ b/scripts/ColorPicker/views/ColorSquareView.js
@@ -0,0 +1,47 @@
+define([
+	'backbone',
+	'ColorPicker/models/ColorModel',
+], function(Backbone, ColorModel) {
+	
+	var ColorSquareView = Backbone.View.extend({
+		initialize: function (params) {
+			this.view = params;
+		},
+		
+		render: function () {
+			$(this.el).css({
+				"background-color": this.model.get("rgb")
+			});
+			
+			return this;
+		},
+		
+		events: {
+			"mouseover": "onMouseOver",
+			"mouseout": "onMouseOut",
+			"click": "onMouseClick"
+		},
+		
+		onMouseOver: function () {
+			var cmyk = this.model.get("cmyk");
+			var rgb = this.model.get("rgb");
+			
+			this.view.parentView.trigger("updateInput", cmyk, rgb);
+		
+		},
+		
+		onMouseOut: function () {
+			this.view.parentView.trigger("setValueModel");
+		
+		},
+		
+		onMouseClick: function () {
+			var cmyk = this.model.get("cmyk");
+			var rgb = this.model.get("rgb");
+			
+			this.view.parentView.trigger("setNewValueModel", cmyk, rgb);
+		}
+	})
+	
+	return ColorSquareView;
+});
diff --git a/scripts/main.js b/scripts/main.js
index 9a1976c..f98c07c 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -12,5 +12,6 @@ require(["ColorPicker/app"], function (ColorPicker) {
 		divId: 'test_block',
 		defaultColor: '#645654'
 	});
+	
 	colorPicker1.render();
-});
\ No newline at end of file
+});