diff --git a/src/legends.js b/src/legends.js
index 90b054d65e..31dc25adbb 100644
--- a/src/legends.js
+++ b/src/legends.js
@@ -5,8 +5,8 @@ import {legendRamp} from "./legends/ramp.js";
 import {legendSwatches, legendSymbols} from "./legends/swatches.js";
 
 const legendRegistry = new Map([
-  ["color", legendColor],
   ["symbol", legendSymbols],
+  ["color", legendColor],
   ["opacity", legendOpacity]
 ]);
 
diff --git a/src/marks/dot.js b/src/marks/dot.js
index 6210621b2d..fd600837ca 100644
--- a/src/marks/dot.js
+++ b/src/marks/dot.js
@@ -42,8 +42,8 @@ export class Dot extends Mark {
       const fillChannel = channels.find(({name}) => name === "fill");
       const strokeChannel = channels.find(({name}) => name === "stroke");
       symbolChannel.hint = {
-        fill: fillChannel ? (fillChannel.value === symbolChannel.value ? "color" : true) : this.fill,
-        stroke: strokeChannel ? (strokeChannel.value === symbolChannel.value ? "color" : true) : this.stroke
+        fill: fillChannel ? (fillChannel.value === symbolChannel.value ? "color" : "currentColor") : this.fill,
+        stroke: strokeChannel ? (strokeChannel.value === symbolChannel.value ? "color" : "currentColor") : this.stroke
       };
     }
   }
diff --git a/test/output/symbolLegendDifferentColor.html b/test/output/symbolLegendDifferentColor.html
new file mode 100644
index 0000000000..c015a21c2b
--- /dev/null
+++ b/test/output/symbolLegendDifferentColor.html
@@ -0,0 +1,50 @@
+<div class="plot" style="
+        --swatchWidth: 15px;
+        --swatchHeight: 15px;
+      ">
+  <style>
+    .plot {
+      font-family: system-ui, sans-serif;
+      font-size: 10px;
+      margin-bottom: 0.5em;
+      margin-left: 0px;
+    }
+
+    .plot-swatch>svg {
+      width: var(--swatchWidth);
+      height: var(--swatchHeight);
+      margin-right: 0.5em;
+      overflow: visible;
+      fill: currentColor;
+      fill-opacity: 1;
+      stroke: none;
+      stroke-width: 1.5px;
+      stroke-opacity: 1;
+    }
+
+    .plot {
+      display: flex;
+      align-items: center;
+      min-height: 33px;
+      flex-wrap: wrap;
+    }
+
+    .plot-swatch {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 1em;
+    }
+  </style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
+    </svg>A</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M-5.350491851768115,-1.7834972839227048L-1.7834972839227048,-1.7834972839227048L-1.7834972839227048,-5.350491851768115L1.7834972839227048,-5.350491851768115L1.7834972839227048,-1.7834972839227048L5.350491851768115,-1.7834972839227048L5.350491851768115,1.7834972839227048L1.7834972839227048,1.7834972839227048L1.7834972839227048,5.350491851768115L-1.7834972839227048,5.350491851768115L-1.7834972839227048,1.7834972839227048L-5.350491851768115,1.7834972839227048Z"></path>
+    </svg>B</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M0,-7.422543747841057L4.285407630887808,0L0,7.422543747841057L-4.285407630887808,0Z"></path>
+    </svg>C</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M-3.988021164537411,-3.988021164537411h7.976042329074822v7.976042329074822h-7.976042329074822Z"></path>
+    </svg>D</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M0,-7.528019676343693L1.6901457214599565,-2.326286013979192L7.159572167984802,-2.3262860139791925L2.7347132232624225,0.8885621897865381L4.42485894472238,6.090295852151038L6.661338147750939e-16,2.8754476483853075L-4.424858944722378,6.090295852151039L-2.734713223262422,0.8885621897865386L-7.159572167984803,-2.3262860139791908L-1.690145721459957,-2.3262860139791917Z"></path>
+    </svg>E</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path d="M0,-6.998041357002963L6.060481591898691,3.4990206785014815L-6.060481591898691,3.4990206785014815Z"></path>
+    </svg>F</span>
+</div>
\ No newline at end of file
diff --git a/test/plots/legend-symbol.js b/test/plots/legend-symbol.js
index 8b13e641c7..5e7dbf4c7d 100644
--- a/test/plots/legend-symbol.js
+++ b/test/plots/legend-symbol.js
@@ -5,20 +5,27 @@ export function symbolLegendBasic() {
   return Plot.legend({symbol: {domain: "ABCDEF"}});
 }
 
-// TODO There’s no way to define a standalone symbol legend with a color scale,
-// since the color scale takes priority if both are specified.
+// TODO It would be nice if the symbol scale’s range automatically defaulted to
+// d3.symbolsFill given the presence of fill “color”.
 export function symbolLegendColorFill() {
-  return Plot.plot({color: {domain: "ABCDEF"}, symbol: {domain: "ABCDEF", range: d3.symbolsFill}}).legend("symbol", {fill: "color"});
+  return Plot.legend({color: {domain: "ABCDEF"}, symbol: {domain: "ABCDEF", range: d3.symbolsFill}, fill: "color"});
 }
 
-// TODO There’s no way to define a standalone symbol legend with a color scale,
-// since the color scale takes priority if both are specified.
+// TODO It would be nice if the stroke option defaulted to “color” given the
+// presence of a color scale (and no fill option).
 export function symbolLegendColorStroke() {
-  return Plot.plot({color: {domain: "ABCDEF"}, symbol: {domain: "ABCDEF"}}).legend("symbol", {stroke: "color"});
+  return Plot.legend({color: {domain: "ABCDEF"}, symbol: {domain: "ABCDEF"}, stroke: "color"});
 }
 
-// TODO It would be nice if the symbol hint could apply here; but the hint is
-// currently only set by marks that have matching channels.
+// Note: The symbol hint requires reference equality for channel definitions,
+// and so doesn’t consider the fill and symbol channels to be using the same
+// encoding here.
+export function symbolLegendDifferentColor() {
+  return Plot.dotX("ABCDEF", {fill: d => d, symbol: d => d}).plot().legend("symbol");
+}
+
+// TODO It would be nice if the symbol scale’s range automatically defaulted to
+// d3.symbolsFill given the presence of the fill option.
 export function symbolLegendFill() {
   return Plot.legend({symbol: {domain: "ABCDEF", range: d3.symbolsFill}, fill: "red"});
 }