diff --git a/main.js b/main.js
index f86d714..c55bb73 100644
--- a/main.js
+++ b/main.js
@@ -218,7 +218,7 @@ function newCustomLayer(name, sourceURL, colorString) {
     }),
   });
   li.innerHTML = `
-    <label><input type="checkbox" checked> ${name}</label>
+    <label><input type="checkbox" checked><div class="color-badge" style="background-color: rgb(${color.join(', ')});"></div> ${name}</label>
   `;
   li.querySelector("input").addEventListener("change", function(e){
     if (e.target.checked) {
diff --git a/style.css b/style.css
index 35c686a..0d56c1e 100644
--- a/style.css
+++ b/style.css
@@ -70,6 +70,15 @@ aside summary {
   font-weight: bold;
 }
 
+.color-badge {
+  display: inline-block;
+  height: 1em;
+  width: 2em;
+  vertical-align: middle;
+  border: 1px #444 solid;
+  border-radius: 4px;
+}
+
 @media (max-width: 400px) {
   .nav-open #map {
     left: 100%;