CSS Hex to RGB

Are you tired of copying and pasting hexadecimal color codes into RGB format? Look no further! Our CSS Hex to RGB tool is just what you need. With this tool, you can easily convert any hex code to RGB format without the hassle.

How to use

Using our CSS Hex to RGB tool is easy. Simply follow these steps:

1. Enter your hex code into the input field.
2. Click on the "Convert" button.
3. Your RGB code will appear below the input field.

Example

Let's say you have a hex code of #bada55. To convert this to RGB format, simply enter it into the input field and click on the "Convert" button. The resulting RGB code will be rgb(186, 218, 85).

Code snippet

To use our CSS Hex to RGB tool in your code, simply copy and paste the following snippet:

<div>
  <label for="hex">Hex code:</label>
  <input type="text" id="hex" name="hex" />

  <button id="convert">Convert</button>

  <p id="rgb"></p>
</div>

<script>
  const hexInput = document.getElementById('hex');
  const convertBtn = document.getElementById('convert');
  const rgbOutput = document.getElementById('rgb');

  convertBtn.addEventListener('click', () => {
    const hexCode = hexInput.value;
    const rgbCode = hexToRgb(hexCode);

    rgbOutput.textContent = rgbCode;
  });

  function hexToRgb(hex) {
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);

    return `rgb(${r}, ${g}, ${b})`;
  }
</script>

Conclusion

With our CSS Hex to RGB tool, you can easily convert any hex code to RGB format with just a few clicks. Say goodbye to copy and pasting hex codes and hello to a more efficient workflow!