diff --git a/index.html b/index.html
index 51eaf59..c92b042 100644
--- a/index.html
+++ b/index.html
@@ -11,16 +11,31 @@
 				margin: 0;
 				padding: 0;
 				height: 100%;
+				font: 12px/16px sans-serif;
+				color: white;
 			}
 
 			#seamap {
 				width: 100%;
 				height: 100%;
 			}
+			
+			#controls {
+				position: fixed;
+				bottom: 10px;
+				left: 10px;
+				z-index: 1000;
+			}
 		</style>
 	</head>
 	<body>
 		<div id="seamap"></div>
+		<div id="controls">
+			<label>
+				<input name="real-colors" type="checkbox">
+				Show real colors
+			</label>
+		</div>
 		<script id="seamap-query" type="text/x-overpass">
 			[out:json][timeout:25];
 			// gather results
@@ -122,11 +137,18 @@
 					}
 				}).addTo(map).addData(geojson);
 			});
+			
+			let useRealColors = false;
+			
+			document.querySelector('input[name=real-colors]').addEventListener('change', function(e) {
+				useRealColors = this.checked;
+			});
 
 			lights.then(layer => {
 				let draw = function(t) {
 					layer.eachVisibleLayer(marker => {
-						marker.setColor(marker.options.sequence.state(t));
+						let state = marker.options.sequence.state(t);
+						marker.setColor(state ? (useRealColors ? state : '#FF0') : false);
 					});
 				};
 
