Merge pull request #185 from pvictordev/snippets/js-color-manipulation

[Snippets] Added several new color snippets for JavaScript.

Author: Mathys-Gasnier

public/consolidated/javascript.json

@@ -80,6 +80,28 @@
     {
         "name": "Color Manipulation",
         "snippets": [
+            {
+                "title": "Hex to RGB Color",
+                "description": "Converts hexadecimal color code to RGB color values.",
+                "author": "pvictordev",
+                "tags": [
+                    "color",
+                    "conversion"
+                ],
+                "contributors": [],
+                "code": "function hexToRgb(hex) {\n  let sanitizedHex = hex.startsWith(\"#\") ? hex.slice(1) : hex;\n\n  if (sanitizedHex.length === 3) {\n    sanitizedHex = [...sanitizedHex].map((char) => char + char).join(\"\");\n  }\n\n  const bigint = parseInt(sanitizedHex, 16);\n\n  return {\n    r: (bigint >> 16) & 0xff, \n    g: (bigint >> 8) & 0xff,  \n    b: bigint & 0xff,       \n  };\n}\n\n// Usage:\nconsole.log(hexToRgb(\"#ff5733\")); // { r: 255, g: 87, b: 51 }\nconsole.log(hexToRgb(\"#ffff\")); // { r: 0, g: 255, b: 255 }\n"
+            },
+            {
+                "title": "HSL to RGB Color",
+                "description": "Converts HSL color values to RGB color values.",
+                "author": "pvictordev",
+                "tags": [
+                    "color",
+                    "conversion"
+                ],
+                "contributors": [],
+                "code": "function hslToRgb(h, s, l) {\n  s /= 100;\n  l /= 100;\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  const x = c * (1 - Math.abs((h / 60) % 2 - 1));\n  const m = l - c / 2;\n\n  const [r, g, b] = \n    h < 60  ? [c, x, 0] :\n    h < 120 ? [x, c, 0] :\n    h < 180 ? [0, c, x] :\n    h < 240 ? [0, x, c] :\n    h < 300 ? [x, 0, c] :\n              [c, 0, x];\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\n// Usage:\nconsole.log(hslToRgb(14, 100, 60)); // { r: 255, g: 87, b: 51 }\nconsole.log(hslToRgb(0, 0, 100)); // { r: 255, g: 255, b: 255 }\n"
+            },
             {
                 "title": "RGB to Hex Color",
                 "description": "Converts RGB color values to hexadecimal color code.",
@@ -90,6 +112,17 @@
                 ],
                 "contributors": [],
                 "code": "function rgbToHex(r, g, b) {\n  const toHex = (n) => {\n    const hex = n.toString(16);\n    return hex.length === 1 ? '0' + hex : hex;\n  };\n  \n  return '#' + toHex(r) + toHex(g) + toHex(b);\n}\n\n// Usage:\nconsole.log(rgbToHex(255, 128, 0)); // Output: \"#ff8000\"\nconsole.log(rgbToHex(0, 255, 0)); // Output: \"#00ff00\"\n"
+            },
+            {
+                "title": "RGB to HSL Color",
+                "description": "Converts RGB color values to HSL color values.",
+                "author": "pvictordev",
+                "tags": [
+                    "color",
+                    "conversion"
+                ],
+                "contributors": [],
+                "code": "function rgbToHsl(r, g, b) {\n  [r, g, b] = [r, g, b].map((v) => v / 255);\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const delta = max - min;\n\n  const l = (max + min) / 2;\n\n  if (delta === 0) return { h: 0, s: 0, l: Math.round(l * 100) };\n\n  const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);\n\n  const h = \n    max === r ? ((g - b) / delta + (g < b ? 6 : 0)) :\n    max === g ? (b - r) / delta + 2 :\n                (r - g) / delta + 4;\n\n  return {\n    h: Math.round(h * 60), \n    s: Math.round(s * 100),\n    l: Math.round(l * 100), \n  };\n}\n\n// Usage:\nconsole.log(rgbToHsl(255, 87, 51)); // { h: 14, s: 100, l: 60 }\nconsole.log(rgbToHsl(255, 255, 255)); // { h: 0, s: 0, l: 100 }\n"
             }
         ]
     },

snippets/javascript/color-manipulation/hex-to-rgb-color.md

@@ -0,0 +1,28 @@
+---
+title: Hex to RGB Color
+description: Converts hexadecimal color code to RGB color values.
+author: pvictordev
+tags: color,conversion
+---
+
+```js
+function hexToRgb(hex) {
+  let sanitizedHex = hex.startsWith("#") ? hex.slice(1) : hex;
+
+  if (sanitizedHex.length === 3) {
+    sanitizedHex = [...sanitizedHex].map((char) => char + char).join("");
+  }
+
+  const bigint = parseInt(sanitizedHex, 16);
+
+  return {
+    r: (bigint >> 16) & 0xff, 
+    g: (bigint >> 8) & 0xff,  
+    b: bigint & 0xff,       
+  };
+}
+
+// Usage:
+console.log(hexToRgb("#ff5733")); // { r: 255, g: 87, b: 51 }
+console.log(hexToRgb("#ffff")); // { r: 0, g: 255, b: 255 }
+```

snippets/javascript/color-manipulation/hsl-to-rgb-color.md

@@ -0,0 +1,34 @@
+---
+title: HSL to RGB Color
+description: Converts HSL color values to RGB color values.
+author: pvictordev
+tags: color,conversion
+---
+
+```js
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  const m = l - c / 2;
+
+  const [r, g, b] = 
+    h < 60  ? [c, x, 0] :
+    h < 120 ? [x, c, 0] :
+    h < 180 ? [0, c, x] :
+    h < 240 ? [0, x, c] :
+    h < 300 ? [x, 0, c] :
+              [c, 0, x];
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}
+
+// Usage:
+console.log(hslToRgb(14, 100, 60)); // { r: 255, g: 87, b: 51 }
+console.log(hslToRgb(0, 0, 100)); // { r: 255, g: 255, b: 255 }
+``` 

snippets/javascript/color-manipulation/rgb-to-hsl-color.md

@@ -0,0 +1,37 @@
+---
+title: RGB to HSL Color
+description: Converts RGB color values to HSL color values.
+author: pvictordev
+tags: color,conversion
+---
+
+```js
+function rgbToHsl(r, g, b) {
+  [r, g, b] = [r, g, b].map((v) => v / 255);
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+
+  const l = (max + min) / 2;
+
+  if (delta === 0) return { h: 0, s: 0, l: Math.round(l * 100) };
+
+  const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+
+  const h = 
+    max === r ? ((g - b) / delta + (g < b ? 6 : 0)) :
+    max === g ? (b - r) / delta + 2 :
+                (r - g) / delta + 4;
+
+  return {
+    h: Math.round(h * 60), 
+    s: Math.round(s * 100),
+    l: Math.round(l * 100), 
+  };
+}
+
+// Usage:
+console.log(rgbToHsl(255, 87, 51)); // { h: 14, s: 100, l: 60 }
+console.log(rgbToHsl(255, 255, 255)); // { h: 0, s: 0, l: 100 }
+```