RGB to HEX and HEX To RGB Converter

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: "Roboto", 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 hex = document.getElementById("hex");
const rgb = document.getElementById("rgb");

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

function checkHex(hex) {
  const hexRegex = /^[#]*([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i;

if (hexRegex.test(hex)) {
    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;
  }
}

/**
   * Hex Converting RGB Function
   * @param {string} hex - <hex-color> eg. #rgb | #rgba | #rrggbbaa | #rgba
   */
function HexToRGB(hex) {
  let r = 0,
  g = 0,
  b = 0;

if (hex.length == 4) {
    r = `0x${hex[1]}${hex[1]}`;
    g = `0x${hex[2]}${hex[2]}`;
    b = `0x${hex[3]}${hex[3]}`;
  } else if (hex.length == 7) {
    r = `0x${hex[1]}${hex[2]}`;
    g = `0x${hex[3]}${hex[4]}`;
    b = `0x${hex[5]}${hex[6]}`;
  }

return `rgb(${+r} ${+g} ${+b})`;
}

/**
   * RGB Converting Hex Function
   * @param {string} rgb - <rgb-color>
   */

function RGBToHex(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);
    }
  }

let r = (+rgb[0]).toString(16);
  let g = (+rgb[1]).toString(16);
  let b = (+rgb[2]).toString(16);

if (r.length == 1) {
    r = `0${r}`;
  }

if (g.length == 1) {
    g = `0${g}`;
  }

if (b.length == 1) {
    b = `0${b}`;
  }

return `#${r}${g}${b}`;
}

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

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

console.log(checkRgb("rgb20 909 00)"));

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 to HEX and HEX To RGB Converter

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Select Text and Share On Social Media

Password Strength Meter

Beautiful Toast Notifications

Responsive Cookie Bar

Magic castle

Categories

Hashtag

Blog Archive