JSFiddle - React, Tailwind, and code Playground

by ethertank

HTML

<form name="ColorForm">
    
<fieldset>
<legend>HEX to RGB</legend>    
<label>Hex: #<input type="text" size="21" maxlength="6" name="HexIn"></label>
<input type="button" name="Button" onclick="HexToRGB()" value="Hex &gt; RGB">
R<input type="text" maxlength="3" name="RedOut" size="4">
G<input type="text" maxlength="3" name="GreenOut" size="4">
B<input type="text" maxlength="3" name="BlueOut" size="4">
</fieldset>

<fieldset>    
<legend>RGB to HEX</legend>
<label>R<input type="text" maxlength="3" name="RedIn" size="4"></label>
<label>G<input type="text" maxlength="3" name="GreenIn" size="4"></label>
<label>B<input type="text" maxlength="3" name="BlueIn" size="4"></label>
<input type="button" name="Button" onclick="RGBToHex()" value="RGB &gt; Hex">
<input type="text" maxlength="6" name="HexOut" size="21">
</fieldset>

</form>

CSS

[type="button"]{display:block;margin: 5px 0;}

fieldset{ border:10px solid #000; margin: 0 0 40px;}

JavaScript

function GiveDec(Hex) {
    if (Hex == "A") Value = 10;
    else if (Hex == "B") Value = 11;
    else if (Hex == "C") Value = 12;
    else if (Hex == "D") Value = 13;
    else if (Hex == "E") Value = 14;
    else if (Hex == "F") Value = 15;
    else Value = eval(Hex);
    return Value;
}

function GiveHex(Dec) {
    if (Dec == 10) Value = "A";
    else if (Dec == 11) Value = "B";
    else if (Dec == 12) Value = "C";
    else if (Dec == 13) Value = "D";
    else if (Dec == 14) Value = "E";
    else if (Dec == 15) Value = "F";
    else Value = "" + Dec;
    return Value;
}

function HexToRGB() {
    Input = document.forms['ColorForm'].elements['HexIn'].value;
    Input = Input.toUpperCase();

    a = GiveDec(Input.substring(0, 1));
    b = GiveDec(Input.substring(1, 2));
    c = GiveDec(Input.substring(2, 3));
    d = GiveDec(Input.substring(3, 4));
    e = GiveDec(Input.substring(4, 5));
    f = GiveDec(Input.substring(5, 6));

    x = (a * 16) + b;
    y = (c * 16) + d;
    z = (e * 16) + f;

    document.forms['ColorForm'].elements['RedOut'].value = x;
    document.forms['ColorForm'].elements['GreenOut'].value = y;
    document.forms['ColorForm'].elements['BlueOut'].value = z;
}

function RGBToHex() {
    Red = document.forms['ColorForm'].elements['RedIn'].value;
    Green = document.forms['ColorForm'].elements['GreenIn'].value;
    Blue = document.forms['ColorForm'].elements['BlueIn'].value;

    a = GiveHex(Math.floor(Red / 16));
    b = GiveHex(Red % 16);
    c = GiveHex(Math.floor(Green / 16));
    d = GiveHex(Green % 16);
    e = GiveHex(Math.floor(Blue / 16));
    f = GiveHex(Blue % 16);

    z = a + b + c + d + e + f;

    document.forms['ColorForm'].elements['HexOut'].value = z;
}