CARVIEW |
Select Language
HTTP/2 200
date: Sat, 11 Oct 2025 10:48:07 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
etag: W/"a304ffeb60dd48ed2ce545d3257912da"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: origin-when-cross-origin, strict-origin-when-cross-origin
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com github.githubassets.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com wss://alive-staging.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com marketplace-screenshots.githubusercontent.com/ copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=rwNAo5UyPAxkPQ6vHiqevt7NmQyPKGkZ%2BUgxb0HwyjEQIp6a2RZrUYr1rimXKskubucWxKaKEKjdGedVuipsdazdIVJd4dNM4mIiF2Kfuv4VKFz6EPnltue7LU5Eugs%2BKEBo8o79%2FblwLyaUxaLMtLUPRuiyOWs2QPjS4JvriE6Retpk96bb3Q7oLnhcX%2FM4oVGqX5Q93RGXH9Q9zQEIydotIfpZzB%2FqNZysK%2Blz5SyQiGwD3ycxn2qUaqtLIlDHySVQYgW9ZAeDGJyDuxRqkw%3D%3D--TVgnwYwQWNw0ofbp--ffy%2Byw3wtLpiaDKIiI5dKQ%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.1995717206.1760179687; Path=/; Domain=github.com; Expires=Sun, 11 Oct 2026 10:48:07 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Sun, 11 Oct 2026 10:48:07 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: EABE:C7FF0:5E5A43:7DDEB1:68EA35E7
Convert RGB to HSL and vice versa in Javascript. · GitHub
Show Gist options
Save vahidk/05184faf3d92a0aa1b46aeaa93b07786 to your computer and use it in GitHub Desktop.
{{ message }}
Instantly share code, notes, and snippets.
Last active
October 10, 2025 11:52
-
Star
26
(26)
You must be signed in to star a gist -
Fork
2
(2)
You must be signed in to fork a gist
-
Save vahidk/05184faf3d92a0aa1b46aeaa93b07786 to your computer and use it in GitHub Desktop.
Convert RGB to HSL and vice versa in Javascript.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This code is based on https://en.wikipedia.org/wiki/HSL_and_HSV | |
// Free to use for any purpose. No attribution needed. | |
function rgbToHsl(r, g, b) { | |
r /= 255; g /= 255; b /= 255; | |
let max = Math.max(r, g, b); | |
let min = Math.min(r, g, b); | |
let d = max - min; | |
let h; | |
if (d === 0) h = 0; | |
else if (max === r) h = (g - b) / d % 6; | |
else if (max === g) h = (b - r) / d + 2; | |
else if (max === b) h = (r - g) / d + 4; | |
let l = (min + max) / 2; | |
let s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); | |
return [h * 60, s, l]; | |
} | |
function hslToRgb(h, s, l) { | |
let c = (1 - Math.abs(2 * l - 1)) * s; | |
let hp = h / 60.0; | |
let x = c * (1 - Math.abs((hp % 2) - 1)); | |
let rgb1; | |
if (isNaN(h)) rgb1 = [0, 0, 0]; | |
else if (hp <= 1) rgb1 = [c, x, 0]; | |
else if (hp <= 2) rgb1 = [x, c, 0]; | |
else if (hp <= 3) rgb1 = [0, c, x]; | |
else if (hp <= 4) rgb1 = [0, x, c]; | |
else if (hp <= 5) rgb1 = [x, 0, c]; | |
else if (hp <= 6) rgb1 = [c, 0, x]; | |
let m = l - c * 0.5; | |
return [ | |
Math.round(255 * (rgb1[0] + m)), | |
Math.round(255 * (rgb1[1] + m)), | |
Math.round(255 * (rgb1[2] + m))]; | |
} |
This worked for me like a charm :)
type HslType = { h: number; s: number; l: number }
const hslToRgb = (hsl: HslType): RgbType => {
let { h, s, l } = hsl
// IMPORTANT if s and l between 0,1 remove the next two lines:
s /= 100
l /= 100
const k = (n: number) => (n + h / 30) % 12
const a = s * Math.min(l, 1 - l)
const f = (n: number) =>
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
return {
r: Math.round(255 * f(0)),
g: Math.round(255 * f(8)),
b: Math.round(255 * f(4)),
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can’t perform that action at this time.
Thanks, this snippet spared me some toil :P. I believe that
should be
since the javascript modulo operator handles negative numbers differently than most other languages (The code breaks on some edge cases without it).