Skip to content

[Snippets] Added several new color snippets for JavaScript. #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/consolidated/c.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"numbers"
],
"contributors": [],
"code": "#include<stdio.h>\nvoid swap(int* num1,int* num2){\n *num1 = *num1 + *num2;\n *num2 = *num1 - *num2;\n *num1 = *num1 - *num2;\n}\n\n// Usage:\nint a = 3,b = 4;\nswap(&a,&b); // simply use printf after this to print swapped values\n"
"code": "#include<stdio.h>\nvoid swap(int* num1,int* num2){\n *num1 = *num1 + *num2;\n *num2 = *num1 - *num2;\n *num1 = *num1 - *num2;\n}\n\n// Usage:\nint a = 3,b = 4;\nswap(&a,&b); // swaps the values of the a and b variables\n"
}
]
}
Expand Down
33 changes: 33 additions & 0 deletions public/consolidated/javascript.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,28 @@
{
"categoryName": "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.",
Expand All @@ -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"
}
]
},
Expand Down
28 changes: 28 additions & 0 deletions snippets/javascript/color-manipulation/hex-to-rgb-color.md
Original file line number Diff line number Diff line change
@@ -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 }
```
34 changes: 34 additions & 0 deletions snippets/javascript/color-manipulation/hsl-to-rgb-color.md
Original file line number Diff line number Diff line change
@@ -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 }
```
37 changes: 37 additions & 0 deletions snippets/javascript/color-manipulation/rgb-to-hsl-color.md
Original file line number Diff line number Diff line change
@@ -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 }
```
Loading