I'm having a problem creating a color-ramp gradient with chroma.js. After specifying a list of colors and an equal-length list of domain values, I'm finding that the resultant chroma.js function returns the same color for all values between the first two entries in the domain (inclusive).

I can reproduce this with a simple example in which I query only the domain values themselves via the Chroma.js function (rather than many values between as in my actual use case). The result of this is the first row of output from the included code snippet.

You can see that querying for 0.001 and 0.01 both produce the first color #ffffcc, when 0.01 should map to the second color #f6d470. The third and subsequent colors work correctly.

Looping over just the original colors themselves, we can see what the second colour that the second domain value should look like (the second row of colors output by the snippet).

Hopefully I'm missing something obvious here; any help would be appreciated.

const output = document.getElementById('output');
const colors = [
    "#ffffcc",
    "#f6d470",
    "#e79452",
    "#c2554a",
    "#68352a",
    "#1a1a01"
];
const domain = [
    0.001,
    0.01,
    0.1,
    1,
    10,
    100
]
const chromaColors = chroma.scale(colors).domain(domain).mode('lab');
for (const domainEntry of domain) {
  var color = chromaColors(domainEntry);
  output.innerHTML += "<div class='color' style='background-color: " + color + ";'></div>"
}
output.innerHTML += '<br/>';
for (const color of colors) {
  output.innerHTML += "<div class='color' style='background-color: " + color + ";'></div>"
}

.color {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"></script>
<div id="output"></div>