diff --git a/README.md b/README.md
index 6cb97e5..2642660 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ A small pixel art drawing app that runs in your web browser. Everything lives in
 
 - **Pick a color** by clicking one of the squares in the palette, or choose any color with **Custom**.
 - **Paint** by clicking a square on the 32×32 grid, or click and drag to paint many squares at once.
+- **Fill**: click the Fill button, then click a square to fill it and every touching square of the same color with your chosen color. Right-click with Fill to empty an area instead. Click **Brush** to go back to painting.
 - **Eraser**: click the Eraser button, then click or drag to erase. Clicking with the right mouse button also erases. Click **Brush** to go back to painting.
 - **Grid lines**: turns the faint lines between squares on or off.
 - **Clear**: wipes the whole drawing. It asks you first, just in case.
diff --git a/index.html b/index.html
index 8230560..568e5c1 100644
--- a/index.html
+++ b/index.html
@@ -127,6 +127,7 @@
       Custom: <input type="color" id="customColor" value="#ff8800">
     </label>
     <button class="tool" id="brushBtn" type="button">✏️ Brush</button>
+    <button class="tool" id="fillBtn" type="button">🪣 Fill</button>
     <button class="tool" id="eraserBtn" type="button">🧽 Eraser</button>
     <button class="tool" id="linesBtn" type="button">▦ Grid lines</button>
     <button class="tool" id="clearBtn" type="button">🗑️ Clear</button>
@@ -134,7 +135,7 @@
 
   <div id="grid" class="show-lines"></div>
 
-  <p class="hint">Click or drag to paint. Right-click (or hold the Eraser) to erase.</p>
+  <p class="hint">Click or drag to paint. Right-click (or hold the Eraser) to erase. Use Fill to color a whole area at once.</p>
 
 <script>
 (function () {
@@ -156,14 +157,18 @@
   const customColor = document.getElementById("customColor");
   const brushBtn = document.getElementById("brushBtn");
   const eraserBtn = document.getElementById("eraserBtn");
+  const fillBtn = document.getElementById("fillBtn");
   const linesBtn = document.getElementById("linesBtn");
   const clearBtn = document.getElementById("clearBtn");
 
   let color = COLORS[0];
   let erasing = false;
+  let filling = false;
   let painting = false;
   let paintValue = color;
   const cells = [];
+  // What each square holds: a color like "#ff0000", or ERASE for empty
+  const pixels = new Array(SIZE * SIZE).fill(ERASE);
 
   // Build the grid
   for (let i = 0; i < SIZE * SIZE; i++) {
@@ -190,7 +195,8 @@
     swatches.forEach(function (s, i) {
       s.classList.toggle("selected", !erasing && COLORS[i] === color);
     });
-    brushBtn.classList.toggle("active", !erasing);
+    brushBtn.classList.toggle("active", !erasing && !filling);
+    fillBtn.classList.toggle("active", !erasing && filling);
     eraserBtn.classList.toggle("active", erasing);
     if (erasing) {
       currentBox.style.background = "";
@@ -202,14 +208,40 @@
   }
 
   function selectColor(c) {
-    color = c;
+    color = c.toLowerCase();
     erasing = false;
     updateUI();
   }
 
+  function setPixel(i, value) {
+    pixels[i] = value;
+    cells[i].style.background = value === ERASE ? "" : value;
+  }
+
   function paintCell(cell) {
     if (!cell || !cell.classList.contains("cell")) return;
-    cell.style.background = paintValue === ERASE ? "" : paintValue;
+    setPixel(Number(cell.dataset.index), paintValue);
+  }
+
+  // Fill the connected area of same-colored squares (touching up, down,
+  // left or right) starting from the clicked square.
+  function fillFrom(cell, value) {
+    if (!cell || !cell.classList.contains("cell")) return;
+    const start = Number(cell.dataset.index);
+    const target = pixels[start];
+    if (target === value) return;
+    const stack = [start];
+    while (stack.length) {
+      const i = stack.pop();
+      if (pixels[i] !== target) continue;
+      setPixel(i, value);
+      const x = i % SIZE;
+      const y = (i - x) / SIZE;
+      if (x > 0) stack.push(i - 1);
+      if (x < SIZE - 1) stack.push(i + 1);
+      if (y > 0) stack.push(i - SIZE);
+      if (y < SIZE - 1) stack.push(i + SIZE);
+    }
   }
 
   function cellAt(x, y) {
@@ -220,9 +252,13 @@
   // Painting with mouse, pen or touch
   gridEl.addEventListener("pointerdown", function (e) {
     e.preventDefault();
-    painting = true;
     // Right mouse button always erases
     paintValue = (erasing || e.button === 2) ? ERASE : color;
+    if (filling && !erasing) {
+      fillFrom(cellAt(e.clientX, e.clientY), paintValue);
+      return;
+    }
+    painting = true;
     paintCell(cellAt(e.clientX, e.clientY));
   });
 
@@ -244,15 +280,16 @@
 
   // Tools
   customColor.addEventListener("input", function () { selectColor(customColor.value); });
-  brushBtn.addEventListener("click", function () { erasing = false; updateUI(); });
-  eraserBtn.addEventListener("click", function () { erasing = true; updateUI(); });
+  brushBtn.addEventListener("click", function () { erasing = false; filling = false; updateUI(); });
+  fillBtn.addEventListener("click", function () { erasing = false; filling = true; updateUI(); });
+  eraserBtn.addEventListener("click", function () { erasing = true; filling = false; updateUI(); });
   linesBtn.addEventListener("click", function () {
     gridEl.classList.toggle("show-lines");
     linesBtn.classList.toggle("active", gridEl.classList.contains("show-lines"));
   });
   clearBtn.addEventListener("click", function () {
     if (confirm("Clear the whole drawing?")) {
-      cells.forEach(function (c) { c.style.background = ""; });
+      cells.forEach(function (c, i) { setPixel(i, ERASE); });
     }
   });