joelibaceta/estilos.css

## estilos.css
#colour_container {
	width: 150px;
	height:   150px;
	background-color: black;
}

.color-option {
	width: 50px;
	height: 50px;
}

#red {
	/* Color de fondo: rojo */
	background-color: red;
}

#green {
	background-color: green;
}

#blue {
	background-color: blue;
}

.color-selectors {
	display: flex;

}

## index.html
<html>

<head>
  <link rel="stylesheet" href="estilos.css" />
</head>

<body>

	<div id="colour_container">
		<!-- Cuadro de color principal -->
	</div>

	<div class="color-selectors">

		<div id="red"
			 onmouseover="selectColor(this, 'red')"
			 onmouseout="cleanColors(this)"
			 class="color-option"></div>

		<div id="blue"
			 onmouseover="selectColor(this, 'blue')"
			 onmouseout="cleanColors(this)"
			 class="color-option"></div>

		<div id="green"
			 onmouseover="selectColor(this, 'green')"
			 onmouseout="cleanColors(this)"
			 class="color-option"></div>
	</div>
	<script src="script.js"></script>
</body>

</html>

## script.js

function redSelected() {
	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = "red"
}

function selectColor(e, color) {
	// Esta funcion cambia de color de fondo al el elemento
	// identificado con el Id colour_container, el color es
	// recibido a traves del parametro color

	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = color

	// Otra alternativa
	// mainColourE.style.backgroundColor = e.style.backgroundColor

	//e.style.width = "60px";
	e.style.height = "60px";
}

function cleanColors(e){
	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = "black"

	//e.style.width = "50px";
	e.style.height = "50px";
}
	#colour_container {
	width: 150px;
	height: 150px;
	background-color: black;
	}

	.color-option {
	width: 50px;
	height: 50px;
	}

	#red {
	/* Color de fondo: rojo */
	background-color: red;
	}

	#green {
	background-color: green;
	}

	#blue {
	background-color: blue;
	}

	.color-selectors {
	display: flex;

	}
	<html>

	<head>
	<link rel="stylesheet" href="estilos.css" />
	</head>

	<body>

	<div id="colour_container">
	<!-- Cuadro de color principal -->
	</div>

	<div class="color-selectors">

	<div id="red"
	onmouseover="selectColor(this, 'red')"
	onmouseout="cleanColors(this)"
	class="color-option"></div>

	<div id="blue"
	onmouseover="selectColor(this, 'blue')"
	onmouseout="cleanColors(this)"
	class="color-option"></div>

	<div id="green"
	onmouseover="selectColor(this, 'green')"
	onmouseout="cleanColors(this)"
	class="color-option"></div>
	</div>
	<script src="script.js"></script>
	</body>

	</html>

	function redSelected() {
	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = "red"
	}

	function selectColor(e, color) {
	// Esta funcion cambia de color de fondo al el elemento
	// identificado con el Id colour_container, el color es
	// recibido a traves del parametro color

	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = color

	// Otra alternativa
	// mainColourE.style.backgroundColor = e.style.backgroundColor

	//e.style.width = "60px";
	e.style.height = "60px";
	}

	function cleanColors(e){
	var mainColourE = document.getElementById("colour_container")
	mainColourE.style.backgroundColor = "black"

	//e.style.width = "50px";
	e.style.height = "50px";
	}