https://jsfiddle.net/LordJording/036572cn/4/

by Jordan Sayner

HTML

<h1>Multi Converter</h1>

<!-- Pixel to Rem Converter -->
<div class="converter-section">
  <h2>Pixel to Rem Converter</h2>
  <label for="rootPx">Root pixel size (px):</label>
  <input type="number" id="rootPx" value="16">
  <label for="pxValue">Pixel value to convert (px):</label>
  <input type="number" id="pxValue" placeholder="Enter pixel value">
  <p class="result" id="resultRem"></p>
</div>

<!-- Hex to RGB Converter -->
<div class="converter-section">
  <h2>Hex to RGB Converter</h2>
  <label for="hexValue">Hex value (#xxxxxx):</label>
  <input type="text" id="hexValue" placeholder="#000000">
  <p class="result" id="resultHexToRgb"></p>
</div>

<!-- RGB to Hex Converter -->
<div class="converter-section">
  <h2>RGB to Hex Converter</h2>
  <label for="rgbValue">RGB value (e.g. 255, 255, 255):</label>
  <input type="text" id="rgbValue" placeholder="255, 255, 255">
  <p class="result" id="resultRgbToHex"></p>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 50px;
}
label {
  display: block;
  margin: 15px 0 5px;
}
input {
  padding: 8px;
  width: 100%;
  max-width: 300px;
}
.converter-section {
  margin-bottom: 40px;
}
p.result {
  font-size: 1.2rem;
  margin-top: 20px;
}

JavaScript

// Convert px to rem
function convertToRem() {
  const rootPx = parseFloat(document.getElementById('rootPx').value);
  const pxValue = parseFloat(document.getElementById('pxValue').value);

  if (isNaN(rootPx) || isNaN(pxValue) || rootPx <= 0) {
    document.getElementById('resultRem').textContent = 'Please enter valid numbers.';
    return;
  }

  const remValue = pxValue / rootPx;
  document.getElementById('resultRem').textContent = `${pxValue}px is equal to ${remValue}rem (based on ${rootPx}px root size).`;
}

// Convert hex to RGB
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex.split('').map(h => h + h).join('');
  }

  const bigint = parseInt(hex, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;

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

function convertHexToRgb() {
  const hexValue = document.getElementById('hexValue').value;
  if (/^#?([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/.test(hexValue)) {
    const rgb = hexToRgb(hexValue);
    document.getElementById('resultHexToRgb').textContent = `Hex ${hexValue} is equal to RGB(${rgb})`;
  } else {
    document.getElementById('resultHexToRgb').textContent = 'Please enter a valid hex code.';
  }
}

// Convert RGB to hex
function rgbToHex(r, g, b) {
  return (
    "#" +
    ((1 << 24) + (r << 16) + (g << 8) + b)
    .toString(16)
    .slice(1)
    .toUpperCase()
  );
}

function convertRgbToHex() {
  const rgbValue = document.getElementById('rgbValue').value;
  const rgbArray = rgbValue.split(',').map(Number);

  if (rgbArray.length === 3 && rgbArray.every(num => num >= 0 && num <= 255)) {
    const hex = rgbToHex(rgbArray[0], rgbArray[1], rgbArray[2]);
    document.getElementById('resultRgbToHex').textContent = `RGB(${rgbValue}) is equal to ${hex}`;
  } else {
    document.getElementById('resultRgbToHex').textContent = 'Please enter valid RGB values (0-255).';
  }
}

// Add event listeners to update the result whenever inputs...