diff --git a/l4d2web/l4d2web/static/css/console-autocomplete.css b/l4d2web/l4d2web/static/css/console-autocomplete.css
index b121c88..f8d69ee 100644
--- a/l4d2web/l4d2web/static/css/console-autocomplete.css
+++ b/l4d2web/l4d2web/static/css/console-autocomplete.css
@@ -50,6 +50,35 @@
   color: var(--cm-number, #884488);
 }
 
+/* Color legend rendered under the console input, mirroring the
+   three name colors used in dropdown rows. */
+.console-color-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.2em;
+  margin-top: 0.4em;
+  padding: 0 0.2em;
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  color: var(--color-muted, #888);
+}
+
+.console-color-legend-swatch {
+  font-weight: 600;
+}
+
+.console-color-legend-swatch.swatch-cvar {
+  color: var(--cm-keyword, #569cd6);
+}
+
+.console-color-legend-swatch.swatch-command {
+  color: var(--cm-string, #ce9178);
+}
+
+.console-color-legend-swatch.swatch-sourcemod {
+  color: var(--cm-number, #884488);
+}
+
 .console-autocomplete-desc {
   color: var(--color-muted, #888);
   font-size: 0.9em;
diff --git a/l4d2web/l4d2web/templates/server_detail.html b/l4d2web/l4d2web/templates/server_detail.html
index a0654e5..53fb085 100644
--- a/l4d2web/l4d2web/templates/server_detail.html
+++ b/l4d2web/l4d2web/templates/server_detail.html
@@ -61,6 +61,11 @@
       <span class="console-spinner" aria-hidden="true">…</span>
       <button type="submit">Send</button>
     </form>
+    <div class="console-color-legend" aria-label="Autocomplete color legend">
+      <span class="console-color-legend-swatch swatch-cvar">cvar</span>
+      <span class="console-color-legend-swatch swatch-command">command</span>
+      <span class="console-color-legend-swatch swatch-sourcemod">sm_*  (SourceMod — only if the plugin is loaded)</span>
+    </div>
   </section>
 
   <h2 class="section-title">Files</h2>