Color swatches

index.js

@@ -1,6 +1,9 @@
 const WIDTH = 4; //64;
 const HEIGHT = 4; //32;
 
+// Canvas
+const canvas = document.createElement('div');
+canvas.className = 'canvas';
 for(let y = 0; y < HEIGHT; y++) {
     const row = document.createElement('div');
     row.className = 'row';
@@ -12,5 +15,18 @@ for(let y = 0; y < HEIGHT; y++) {
         });
         row.appendChild(pixel);
     }
-    document.body.appendChild(row);
-}
+    canvas.appendChild(row);
+}
+document.body.appendChild(canvas);
+
+// Palette
+const colors = ['red', 'blue'];
+const palette = document.createElement('div');
+palette.className = 'palette';
+for(let color of colors) {
+    const swatch = document.createElement('div');
+    swatch.className = 'swatch';
+    swatch.style.backgroundColor = color;
+    palette.appendChild(swatch);
+}
+document.body.appendChild(palette);

style.css

@@ -11,4 +11,16 @@ body {
     width: 14px;
     height: 14px;
     border: 1px solid rgb(229, 229, 229);
+}
+
+.palette {
+    display: flex;
+}
+
+.swatch {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    display: flex;
+    margin: 2px;
 }