# Spot the bug - #171: Hex Palette Blender

**URL:** <https://forum.kirupa.com/t/spot-the-bug-171-hex-palette-blender/683663>\
**Category:** web dev\
**Created:** [October 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-171-hex-palette-blender/683663 "2026-10-11T07:00:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [October 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-171-hex-palette-blender/683663/1 "2026-10-11T07:00:13Z")

</div>

Color mixer function keeps generating invalid hexadecimal string values.

```js
function parseHexColor(hex) {
  const clean = hex.replace('#', '');
  const num = parseInt(clean, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255
  };
}

function blendRgb(c1, c2, ratio) {
  const clamped = Math.min(Math.max(ratio, 0), 1);
  return {
    r: Math.round(c1.r + (c2.r - c1.r) * clamped),
    g: Math.round(c1.g + (c2.g - c1.g) * clamped),
    b: Math.round(c1.b + (c2.b - c1.b) * clamped)
  };
}

function formatHexColor(rgb) {
  const r = rgb.r.toString(16);
  const g = rgb.g.toString(16);
  const b = rgb.b.toString(16);
  return `#${r}${g}${b}`;
}

function generatePaletteSteps(startHex, endHex, totalSteps) {
  const start = parseHexColor(startHex);
  const end = parseHexColor(endHex);
  const palette = [];
  const stepFactor = 1 / (totalSteps - 1);

  for (let i = 0; i < totalSteps; i++) {
    const blended = blendRgb(start, end, i * stepFactor);
    palette.push(formatHexColor(blended));
  }

  return palette;
}

const mysticSwatches = generatePaletteSteps('#050a0f', '#e0f810', 8);

```

Reply with what is broken and how you would fix it.