Color Functions

Author: JanluOfficial

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

@@ -0,0 +1,55 @@
+---
+title: Hex to HSL Color
+description: Converts HEX color values to HSL color values.
+author: JanluOfficial
+tags: validation,url
+---
+
+```js
+function hexToHsl(hex) {
+    // Remove the '#' if present
+    hex = hex.replace(/^#/, '');
+    
+    // Convert HEX to RGB
+    let r = parseInt(hex.substring(0, 2), 16) / 255;
+    let g = parseInt(hex.substring(2, 4), 16) / 255;
+    let b = parseInt(hex.substring(4, 6), 16) / 255;
+    
+    // Find the min, max, and delta
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    
+    // Calculate Lightness
+    let l = (max + min) / 2;
+    
+    // Calculate Saturation
+    let s = 0;
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+    }
+    
+    // Calculate Hue
+    let h = 0;
+    if (delta !== 0) {
+        if (max === r) {
+            h = ((g - b) / delta) % 6;
+        } else if (max === g) {
+            h = (b - r) / delta + 2;
+        } else if (max === b) {
+            h = (r - g) / delta + 4;
+        }
+        h = Math.round(h * 60); // Convert to degrees
+        if (h < 0) h += 360;
+    }
+    
+    // Convert saturation and lightness to percentages
+    s = +(s * 100).toFixed(2);
+    l = +(l * 100).toFixed(2);
+    
+    return { h, s, l };
+}
+
+// Usage:
+hexToHsl("#3498db"); // Returns: { h: 204, s: 69.87, l: 53.14 }
+```

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

@@ -0,0 +1,42 @@
+---
+title: HSL to Hex Color
+description: Converts HSL color values to HEX color values.
+author: JanluOfficial
+tags: validation,url
+---
+
+```js
+function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+
+    let c = (1 - Math.abs(2 * l - 1)) * s;
+    let x = c * (1 - Math.abs((h / 60) % 2 - 1));
+    let m = l - c / 2;
+
+    let r = 0, g = 0, b = 0;
+
+    if (0 <= h && h < 60) {
+        r = c; g = x; b = 0;
+    } else if (60 <= h && h < 120) {
+        r = x; g = c; b = 0;
+    } else if (120 <= h && h < 180) {
+        r = 0; g = c; b = x;
+    } else if (180 <= h && h < 240) {
+        r = 0; g = x; b = c;
+    } else if (240 <= h && h < 300) {
+        r = x; g = 0; b = c;
+    } else if (300 <= h && h < 360) {
+        r = c; g = 0; b = x;
+    }
+
+    r = Math.round((r + m) * 255).toString(16).padStart(2, '0');
+    g = Math.round((g + m) * 255).toString(16).padStart(2, '0');
+    b = Math.round((b + m) * 255).toString(16).padStart(2, '0');
+
+    return `#${r}${g}${b}`;
+}
+
+// Usage:
+hslToHex(204, 69.87, 53.14); // Returns: "#3498db"
+```

snippets/javascript/color-manipulation/random-hex-color.md

@@ -0,0 +1,15 @@
+---
+title: Random Hex Color
+description: Generates a completely random hex color.
+author: JanluOfficial
+tags: color,hex,random
+---
+
+```js
+function getRandomHexColor() {
+    return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+}
+
+// Usage:
+getRandomHexColor(); // Returns: "#RRGGBB" (random)
+```

snippets/javascript/color-manipulation/random-hsl-color.md

@@ -0,0 +1,18 @@
+---
+title: Random HSL Color
+description: Generates a completely random HSL color.
+author: JanluOfficial
+tags: color,hsl,random
+---
+
+```js
+function getRandomHslColor() {
+    const h = Math.floor(Math.random() * 360);
+    const s = Math.floor(Math.random() * 101);
+    const l = Math.floor(Math.random() * 101);
+    return [h, s, l];
+}
+
+// Usage:
+getRandomHslColor(); // Returns: (h, s, l) (random)
+```

snippets/javascript/color-manipulation/random-rgb-color.md

@@ -0,0 +1,18 @@
+---
+title: Random RGB Color
+description: Generates a completely random RGB color.
+author: JanluOfficial
+tags: color,rgb,random
+---
+
+```js
+function getRandomRgbColor() {
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    return (r, g, b);
+}
+
+// Usage:
+getRandomRgbColor(); // Returns: (r, g, b) (random)
+```