Improve the solution

index.css

@@ -36,20 +36,181 @@ main {
   width: 14px;
 }
 
+.brush {
+  border: 1px solid #999999;
+  border-radius: 3px;
+  height: 35.5px;
+  margin: 6px 0 0 12px;
+  width: 100px;
+}
+
 .color {
-  border: 1px solid #bbbbbb;
+  /* Prevent classes like 'carmine-red' from specifying the border-color */
+  border: 1px solid #bbbbbb !important;
   border-radius: 50%;
   height: 35.5px;
   margin: 5px 5px 0 0;
   width: 35.5px;
 }
 
-.brushColor {
+.carmine-red {
-  border: 1px solid #999999;
+  background-color: #b23232;
-  border-radius: 3px;
+  border-color: #b23232;
-  height: 35.5px;
+}
-  margin: 6px 0 0 12px;
+
-  width: 100px;
+.coral-red {
+  background-color: #ff4848;
+  border-color: #ff4848;
+}
+
+.pastel-red {
+  background-color: #ff6c6c;
+  border-color: #ff6c6c;
+}
+
+.tigers-eye-orange {
+  background-color: #e59b40;
+  border-color: #e59b40;
+}
+
+.pastel-orange {
+  background-color: #ffad48;
+  border-color: #ffad48;
+}
+
+.topaz-orange {
+  background-color: #ffc57e;
+  border-color: #ffc57e;
+}
+
+.sandstorm-yellow {
+  background-color: #e5de40;
+  border-color: #e5de40;
+}
+
+.lemon-yellow {
+  background-color: #fff748;
+  border-color: #fff748;
+}
+
+.pastel-yellow {
+  background-color: #fffa91;
+  border-color: #fffa91;
+}
+
+.lime-green {
+  background-color: #39cc4b;
+  border-color: #39cc4b;
+}
+
+.ufo-green {
+  background-color: #48ff5e;
+  border-color: #48ff5e;
+}
+
+.mint-green {
+  background-color: #91ff9e;
+  border-color: #91ff9e;
+}
+
+.cerulean-blue {
+  background-color: #3248b2;
+  border-color: #3248b2;
+}
+
+.ultramarine-blue {
+  background-color: #4867ff;
+  border-color: #4867ff;
+}
+
+.carolina-blue {
+  background-color: #91a3ff;
+  border-color: #91a3ff;
+}
+
+.purple-heart {
+  background-color: #6432b2;
+  border-color: #6432b2;
+}
+
+.lavender-indigo {
+  background-color: #8f48ff;
+  border-color: #8f48ff;
+}
+
+.bright-lavender {
+  background-color: #bb91ff;
+  border-color: #bb91ff;
+}
+
+.bruise-purple {
+  background-color: #7c2b99;
+  border-color: #7c2b99;
+}
+
+.heliotrope-purple {
+  background-color: #cf48ff;
+  border-color: #cf48ff;
+}
+
+.lavender-magenta {
+  background-color: #e291ff;
+  border-color: #e291ff;
+}
+
+.black-black {
+  background-color: #000000;
+  border-color: #000000;
+}
+
+.drab-black {
+  background-color: #323232;
+  border-color: #323232;
+}
+
+.dim-gray {
+  background-color: #666666;
+  border-color: #666666;
+}
+
+.manatee-gray {
+  background-color: #999999;
+  border-color: #999999;
+}
+
+.pastel-gray {
+  background-color: #cccccc;
+  border-color: #cccccc;
+}
+
+.white-white {
+  background-color: #ffffff;
+  border-color: #ffffff;
+}
+
+.bistre-brown {
+  background-color: #3a2119;
+  border-color: #3a2119;
+}
+
+.noir-brown {
+  background-color: #512e23;
+  border-color: #512e23;
+}
+
+.bole-brown {
+  background-color: #754233;
+  border-color: #754233;
+}
+
+.chestnut-brown {
+  background-color: #90675b;
+  border-color: #90675b;
+}
+
+.grullo-brown {
+  background-color: #ac8d84;
+  border-color: #ac8d84;
 }
 
 #canvas, #palette {

index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-let brush;
+let brushClass;
 
 const drawCanvas = function() {
   const canvas = document.querySelector('#canvas');
@@ -8,83 +8,83 @@ const drawCanvas = function() {
 
   for (let i = 0; i < 2013; i++) {
     pixel = document.createElement('div');
-    pixel.className = 'pixel';
+    pixel.classList.add('pixel');
     canvas.appendChild(pixel);
   }
 
   canvas.addEventListener('click', (event) => {
-    if (event.target.className !== 'pixel') {
+    if (event.target === canvas) {
       return;
     }
 
-    event.target.style.background = brush;
+    event.target.classList.add(brushClass);
-    event.target.style.borderColor = brush;
   });
 }
 
 const drawPalette = function() {
   const palette = document.querySelector('#palette');
 
-  const hexColors = [
+  const colorClasses = [
-    '#b23232',
+    'carmine-red',
-    '#ff4848',
+    'coral-red',
-    '#ff6c6c',
+    'pastel-red',
-    '#e59b40',
+    'tigers-eye-orange',
-    '#ffad48',
+    'pastel-orange',
-    '#ffc57e',
+    'topaz-orange',
-    '#e5de40',
+    'sandstorm-yellow',
-    '#fff748',
+    'lemon-yellow',
-    '#fffa91',
+    'pastel-yellow',
-    '#39cc4b',
+    'lime-green',
-    '#48ff5e',
+    'ufo-green',
-    '#91ff9e',
+    'mint-green',
-    '#3248b2',
+    'cerulean-blue',
-    '#4867ff',
+    'ultramarine-blue',
-    '#91a3ff',
+    'carolina-blue',
-    '#6432b2',
+    'purple-heart',
-    '#8f48ff',
+    'lavender-indigo',
-    '#bb91ff',
+    'bright-lavender',
-    '#7c2b99',
+    'bruise-purple',
-    '#cf48ff',
+    'heliotrope-purple',
-    '#e291ff',
+    'lavender-magenta',
-    '#000000',
+    'black-black',
-    '#323232',
+    'drab-black',
-    '#666666',
+    'dim-gray',
-    '#999999',
+    'manatee-gray',
-    '#cccccc',
+    'pastel-gray',
-    '#ffffff',
+    'white-white',
-    '#3a2119',
+    'bistre-brown',
-    '#512e23',
+    'noir-brown',
-    '#754233',
+    'bole-brown',
-    '#90675b',
+    'chestnut-brown',
-    '#ac8d84'
+    'grullo-brown'
   ];
 
   let color;
 
-  for (const hexColor of hexColors) {
+  for (const colorClass of colorClasses) {
     color = document.createElement('div');
-    color.className = 'color';
+    color.classList.add('color', colorClass);
-    color.style.background = hexColor;
     palette.appendChild(color);
   }
 
   const heading = document.createElement('h2');
   heading.textContent = 'BRUSH COLOR >';
 
-  const brushColor = document.createElement('div');
+  const brush = document.createElement('div');
-  brushColor.className = 'brushColor';
+  brush.classList.add('brush');
 
   palette.appendChild(heading);
-  palette.appendChild(brushColor);
+  palette.appendChild(brush);
 
   palette.addEventListener('click', (event) => {
-    if (event.target.className !== 'color') {
+    if (event.target === palette) {
       return;
     }
 
-    brush = event.target.style.background;
+    brushClass = event.target.classList.item(1);
-    brushColor.style.background = brush;
+
+    brush.classList.remove(brush.classList.item(1));
+    brush.classList.add(brushClass);
   });
 }