diff --git a/public/consolidated/javascript.json b/public/consolidated/javascript.json index 1b49645a..019aac13 100644 --- a/public/consolidated/javascript.json +++ b/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" } ] }, diff --git a/snippets/javascript/color-manipulation/hex-to-rgb-color.md b/snippets/javascript/color-manipulation/hex-to-rgb-color.md new file mode 100644 index 00000000..3d0108d1 --- /dev/null +++ b/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 } +``` \ No newline at end of file diff --git a/snippets/javascript/color-manipulation/hsl-to-rgb-color.md b/snippets/javascript/color-manipulation/hsl-to-rgb-color.md new file mode 100644 index 00000000..23390237 --- /dev/null +++ b/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 } +``` \ No newline at end of file diff --git a/snippets/javascript/color-manipulation/rgb-to-hsl-color.md b/snippets/javascript/color-manipulation/rgb-to-hsl-color.md new file mode 100644 index 00000000..51e29a86 --- /dev/null +++ b/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 } +``` \ No newline at end of file