Uncaught Error: unknown format: [object HTMLHeadingElement]の解決方法が分かりません。

Question

■やりたいこと
chroma.jsを使ってランダムに色を取得し、気になった色が合ったらロックし、
ランダムに色を取得するためアイコンの色は背景が暗かったら白、明るかったら黒に変えるようにする。

■問題点
問題なく作動しているのですが、何故か色をロックした状態でランダムに色を取得するとタイトルのエラーが出ます。

<div class="colors">
      <div class="color">
        <h2>Hex</h2>
        <div class="controls">
          <button class="lock"><i class="fas fa-lock-open"></i></button>
        </div>
      </div>
</div>

const colorDivs = document.querySelectorAll(".color");

lockButton.forEach((button, index) => {
  button.addEventListener("click", (e) => {
    lockLayer(e, index);
  });
});

function lockLayer(e, index) {
  const lockSVG = e.target.children[0];
  const activeBg = colorDivs[index];
  activeBg.classList.toggle("locked");

  if (lockSVG.classList.contains("fa-lock-open")) {
    e.target.innerHTML = '<i class="fas fa-lock"></i>';
  } else {
    e.target.innerHTML = '<i class="fas fa-lock-open"></i>';
  }
}

function randomColors() {
  //
  initialColors = [];
  colorDivs.forEach((div, index) => {
    const hexText = div.children[0];
    const randomColor = generateHex();
    // Add it to the array
    if (div.classList.contains("locked")) {
      initialColors.push(hexText);
      return;
    } else {
      initialColors.push(chroma(randomColor).hex());
    }

    // 背景の色を変える
    div.style.backgroundColor = randomColor;
    hexText.innerText = randomColor;

    // 明暗によってテキストの色を変える
    checkTextContrast(randomColor, hexText);
  });
  // Reset Inputs
  resetInputs();
  // Check For Button Contrast
  lockButton.forEach((button, index) => {
    checkTextContrast(initialColors[index], button);
    checkTextContrast(initialColors[index], button);
  });
}

function checkTextContrast(color, text) {
  const luminance = chroma(color).luminance();
  if (luminance > 0.5) {
    text.style.color = "black";
  } else {
    text.style.color = "white";
  }
}

Answer 1

initialColors配列には色コード文字列を格納したいのではないでしょうか?
いまのコードの場合、ロック中は

const hexText = div.children[0];
...中略...
initialColors.push(hexText);
...中略...
hexText.innerText = randomColor;

となっているので、h2要素が格納されてしまいますね。
それが、chroma()の引数に指定されてしまうので、
表題のようなエラーになってしまいます。

↓これでどうでしょうか?

initialColors.push(hexText.innerText);

Comments

[cafe1111]

ご回答ありがとうございます。
無事解決できました！！
何がいけないのか分からなくて、積んだかと思いましたが本当に助かりました！
ありがとうございました????