RGB <--> HSL

M.Muzammil

11 Apr, 2020

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  padding: 10px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 3vh 0;
}

.element {
  padding: 4vh;
  min-width: 50vw;
  min-height: 30vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  font-size: 3rem;
  color: #a3afaa;
}

h2 {
  margin: 4vh;
  font-size: 2rem;
  color: #fff;
  text-shadow: 2px 2px 1px var(--color);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5vh;
  font-size: 1.5rem;
}

.control {
  display: grid;
  gap: 1vh;
  grid-template-columns: auto 1fr auto;
}

span,
label {
  align-self: center;
  color: #fff;
  text-shadow: 2px 2px 1px var(--color);
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
  color: #2c3e50;
  font-family: "Gochi Hand", sans-serif;
}

.error input {
  border-color: red;
  color: red;
}

:root {
  --color: #7890fa;
}

body {
  background-color: var(--color);
  transition: all 0.2s ease;
}

.wrapper {
  background-image: radial-gradient(circle at center, var(--color), #291642), linear-gradient(to bottom, #291642, #291642);
  background-repeat: no-repeat;
  background-position: center;
  background-clip: padding-box;
  border-radius: 8px;
  background-blend-mode: multiply, screen;
}

const hsl = document.getElementById("hsl");
const rgb = document.getElementById("rgb");

/**
                                             * Check the Hsl Function
                                             * @param {string} hsl - <hsl-color>, eg, #rgb | #rrggbb | #rgba | #rrggbbaa
                                             */

function checkHsl(hsl) {
  const hslRegex = /^hsl$((((([12]?[1-9]?\d)|[12]0\d|(3[0-5]\d))(\.\d+)?)|(\.\d+))(deg)?|(0|0?\.\d+)turn|(([0-6](\.\d+)?)|(\.\d+))rad)((,\s?(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2}|(\s(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2})$$/i;

if (hslRegex.test(hsl)) {
    return true;
  }
}

/**
   * Check the RGB Function
   * @param {string} rgb - <rgb-color>, eg, rgb(r g b) | rgb(r g b / a) | rgb(r, g, b, a) | rgba(r g b / a)
   */

function checkRgb(rgb) {
  const rgbRegex = /^rgb$(((((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5]),\s?)){2}|((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5])\s)){2})((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5]))|((((([1-9]?\d(\.\d+)?)|100|(\.\d+))%,\s?){2}|((([1-9]?\d(\.\d+)?)|100|(\.\d+))%\s){2})(([1-9]?\d(\.\d+)?)|100|(\.\d+))%))$$/i;

if (rgbRegex.test(rgb)) {
    return true;
  }
}

/**
   * RGB 颜色转 HSL颜色函数
   * @param {number} r - RGB颜色中R的值
   * @param {number} g - RGB颜色中G的值
   * @param {number} b - RGB颜色中B的值
   */
function RGBToHSL(rgb) {
  let sep = rgb.indexOf(",") > -1 ? "," : " ";
  rgb = rgb.substr(4).split(")")[0].split(sep);

for (let R in rgb) {
    let r = rgb[R];
    if (r.indexOf("%") > -1)
    rgb[R] = Math.round(r.substr(0, r.length - 1) / 100 * 255);
  }

// 颜色的红、绿和蓝坐标，它们的值是在0 ~ 1之间的实数
  let r = rgb[0] / 255;
  let g = rgb[1] / 255;
  let b = rgb[2] / 255;

// 找出最大值和最小值，并计算出它们之间的差值
  let M = Math.max(r, g, b); // 最大值
  let m = Math.min(r, g, b); // 最小值
  let delta = M - m; // 最大值 M 和最小值 m 之间的差值

// 初始值HSL的通道h, s, l初始值为0
  let h = 0,
  s = 0,
  l = 0;

// 计算色相h

// 如果C = 0 即 M = m, 没有差别，这个时候h=0
  if (delta == 0) {
    h = 0;
  } else if (M == r) {
    // r = M (红色通道r是最大值)
    // M = r ❯❯❯ H' = ((g - b) / C) % 6
    h = (g - b) / delta % 6;
  } else if (M == g) {
    // g = M (绿色通道g是最大值)
    // M = g ❯❯❯ H' = ((b - r) / C) + 2
    h = (b - r) / delta + 2;
  } else {
    // b = M (蓝色通道b是最大值)
    // M = b ❯❯❯ H' = ((r - g) / C) + 4
    h = (r - g) / delta + 4;
  }

// 最终色相的值 H = H' x 60°
  h = Math.round(h * 60);

// 计算出来的色相值h,如果小于0的话，需要做一下处理
  if (h < 0) {
    h += 360;
  }

// 计算亮度l
  l = (M + m) / 2;

// 计算饱和度
  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

// 将s和l转换成百分比值
  s = +(s * 100).toFixed(0);
  l = +(l * 100).toFixed(0);

return `hsl(${h} ${s}% ${l}%)`;
}

/**
   * HSL 颜色转换成RGB颜色 函数
   * @param {number} h - H通道值
   * @param {string} s - S通道值
   * @param {string} l - L通道值
   */
function HSLToRGB(hsl) {
  let sep = hsl.indexOf(",") > -1 ? "," : " ";
  hsl = hsl.substr(4).split(")")[0].split(sep);

let h = hsl[0];
  // let s = hsl[1].substr(0, hsl[1].length - 1) / 100;
  let s = hsl[1].replace("%", "") / 100;
  // let l = hsl[2].substr(0, hsl[2].length - 1) / 100;
  let l = hsl[2].replace("%", "") / 100;

if (h.indexOf("deg") > -1) {
    h = h.replace("deg", "");
  } else if (h.indexOf("rad") > -1) {
    h = Math.round(h.replace("rad", "") * (180 / Math.PI));
  } else if (h.indexOf("turn") > -1) {
    h = Math.round(h.replace("turn", "") * 360);
  }

if (h > 360) {
    h %= 360;
  }

// 计算色度c的值
  // ❯❯❯ C = (1 - | 2l - 1 |) * s
  let c = (1 - Math.abs(2 * l - 1)) * s;

// 计算x值，用作中间值
  // ❯❯❯ X = C * (1 - | H' mod 2 - 1 |)
  // ❯❯❯ H' = H / 60 ❯❯❯ C * (1 - | (H / 60) mod 2 - 1 |)
  let x = c * (1 - Math.abs(h / 60 % 2 - 1));

// 计算m值，用于调整亮度值
  // ❯❯❯ m = L - C / 2
  let m = l - c / 2;

// 初始化r, g, b的值为0
  let r = 0,
  g = 0,
  b = 0;

// 根据色相h的颜色区域，计算出r, g, b的值
  if (0 <= h && h < 60) {
    // ❯❯❯ R' = C, G' = X, B' = 0
    r = c;
    g = x;
    b = 0;
  } else if (60 <= h && h < 120) {
    // ❯❯❯ R' = X, G' = C, B' = 0
    r = x;
    g = c;
    b = 0;
  } else if (120 <= h && h < 180) {
    // ❯❯❯ R' = 0, G' = C, B' = X
    r = 0;
    g = c;
    b = x;
  } else if (180 <= h && h < 240) {
    // ❯❯❯ R' = 0, G' = X, B' = C
    r = 0;
    g = x;
    b = c;
  } else if (240 <= h && h < 300) {
    // ❯❯❯ R' = X, G' = 0, B' = C
    r = x;
    g = 0;
    b = c;
  } else if (300 <= h && h < 360) {
    // ❯❯❯ R' = C, G' = 0, B' = X
    r = c;
    g = 0;
    b = x;
  }

// 计算出最终的R、G、B通道的值
  // 每个通道加上m值，然后乘以255，再将值作四舍五入
  // ❯❯❯ R = (R' + m) * 255
  // ❯❯❯ G = (G' + m) * 255
  // ❯❯❯ B = (B' + m) * 255
  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);

// 输出RGB颜色：rgb(r g b) || rgb(r, g, b)
  return `rgb(${r} ${g} ${b})`;
}

hsl.addEventListener("change", function () {
  let color = hsl.value;
  if (checkHsl(color)) {
    rgb.value = HSLToRGB(color);
    document.documentElement.style.setProperty("--color", color);
    hsl.parentNode.classList.remove("error");
  } else {
    hsl.parentNode.classList.add("error");
    document.getElementById("hslError").textContent = "❎👎🏽";
  }
});

rgb.addEventListener("change", function () {
  let color = rgb.value;
  if (checkRgb(color)) {
    hsl.value = RGBToHSL(color);
    document.documentElement.style.setProperty("--color", color);
    rgb.parentNode.classList.remove("error");
  } else {
    rgb.parentNode.classList.add("error");
    document.getElementById("rgbError").textContent = "❎👎🏽";
  }
});

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

RGB <--> HSL

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Image Compare Viewer

Expanding Flex Cards Blogger Widgets

CSS 3D Text Effect

Professional toast notification by using HTML & CSS

Animated Warning Bar Pure CSS

Categories

Hashtag

Blog Archive