add color() function to color tool (#176)

mdn · Apr 18, 2024 · c0bf2b2 · c0bf2b2
1 parent 4f67fbe
commit c0bf2b2
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/modules/colors.html b/modules/colors.html
@@ -77,6 +77,10 @@
               <th>HWB</th>
               <td></td>
             </tr>
+            <tr id="colorfunc">
+              <th>color()</th>
+              <td></td>
+            </tr>
           </tbody>
         </table>
 
@@ -144,6 +148,19 @@
           cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
         }
         createHSL(R, G, B, opacity);
+        createColorFunc(R, G, B, opacity);
+      }
+
+      function createColorFunc(r, g, b, opacity) {
+        const cell = document.querySelector("#colorfunc td");
+        const R = Number((r / 255).toFixed(2));
+        const G = Number((g / 255).toFixed(2));
+        const B = Number((b / 255).toFixed(2));
+        if (opacity === 1) {
+          cell.textContent = `color(srgb ${R} ${G} ${B})`;
+        } else {
+          cell.textContent = `color(srgb ${R} ${G} ${B} / ${opacity})`;
+        }
       }
 
       function createHSL(r, g, b, opacity) {