diff --git a/badges/coverage-badge.svg b/badges/coverage-badge.svg
index c5aa6c72..4235aef8 100644
--- a/badges/coverage-badge.svg
+++ b/badges/coverage-badge.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="428" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h112v20H316z"/><path fill="url(#smooth)" d="M0 0h428v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 51.06%</text><text class="high" x="5" y="14">Statements 51.06%</text><text class="shadow" x="125.5" y="15">Branches 40.68%</text><text class="high" x="125" y="14">Branches 40.68%</text><text class="shadow" x="234.5" y="15">Lines 51.77%</text><text class="high" x="234" y="14">Lines 51.77%</text><text class="shadow" x="321.5" y="15">Functions 58.33%</text><text class="high" x="321" y="14">Functions 58.33%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="428" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h112v20H316z"/><path fill="url(#smooth)" d="M0 0h428v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 51.19%</text><text class="high" x="5" y="14">Statements 51.19%</text><text class="shadow" x="125.5" y="15">Branches 40.89%</text><text class="high" x="125" y="14">Branches 40.89%</text><text class="shadow" x="234.5" y="15">Lines 51.91%</text><text class="high" x="234" y="14">Lines 51.91%</text><text class="shadow" x="321.5" y="15">Functions 58.65%</text><text class="high" x="321" y="14">Functions 58.65%</text></g></svg>
diff --git a/badges/tests-badge.svg b/badges/tests-badge.svg
index 3a714e8d..ecc8fc46 100644
--- a/badges/tests-badge.svg
+++ b/badges/tests-badge.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">138/138</text><text class="high" x="46" y="14">138/138</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">139/139</text><text class="high" x="46" y="14">139/139</text></g></svg>
\ No newline at end of file
diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap
index 3802d721..d4d91bdb 100644
--- a/cypress/integration/ui/__snapshots__/scenario.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario.js.snap
@@ -297,3 +297,68 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
   </g>
 </svg>
 `;
+
+exports[`use various parts of svg-edit > check change color #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      style="pointer-events:inherit"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></rect>
+    <text
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="0"
+      x="116"
+      y="87"
+      id="svg_1"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+    >
+      B
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      B
+    </text>
+  </g>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js
index 459feefb..c84dbe11 100644
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@@ -67,4 +67,10 @@ describe('use various parts of svg-edit', function () {
       .click({force: true});
     testSnapshot();
   });
+  it('check change color', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('[data-rgb="#ffff00"]')
+      .click({force: true});
+    testSnapshot();
+  });
 });