RGB/HEX Color Code Converter

There are two common ways to numerically specify a color in CSS:

1. As a hexadecimal number (referred to here as a HEX color).
2. As red-green-blue numbers (referred to here as an RGB color).

The CSS declaration color:#FF1234; is an example of a HEX color. And color:rgb(255,18,52); is an example RGB color.

Both of those result in this font color being published.

Another place where RGB colors are used in CSS is for specifying a partially transparent color, in which case the rgba() function is used. The CSS value rgba(255,18,52,.5) is an example. It would make the color 50% opaque, allowing for some transparency.

You may at times need to convert a HEX color number to RGB color numbers, or vice versa.

Generally RGB colors can be used anywhere a color can be specified. HEX color numbers aren't usable in CSS functions like rgb() and rgba().

Further below, you'll find a converter. Type either RGB color numbers or a HEX color number. The conversion happens automatically.

The RGB colors field expects 3 numbers separated with a comma. 153,51,102 is an example. The numbers may range from 0 through 255.

The HEX color expects a hexadecimal number. Alpha-numeric characters within the number may be upper case or lower case. The hexadecimal number may be 3 characters or 6 characters in length. 936 and 993366 are examples.

When a conversion occurs, a color swatch is also published.

The source code for Color Code Converter is further below.

The conversion form is responsive, friendly to devices and computers.

Paste the Color Code Converter source code into your personal portal page or public web page where you want the conversion form to be published. No customization is required.

<div style="float:left; margin:.5em .5em .5em 0; white-space:nowrap;">
RGB: <input type="text" id="ccc_rgb" style="width:7em; font-size:1em;" placeholder="153,51,102" onkeyup="CCC_UpdateFromRGB()" onchange="CCC_UpdateFromRGB()">
</div>
<div style="float:left; margin:.5em .5em .5em 0; white-space:nowrap;">
HEX: #<input type="text" id="ccc_hex" style="width:6em; font-size:1em;" placeholder="993366" onkeyup="CCC_UpdateFromHEX()" onchange="CCC_UpdateFromHEX()">
</div>
<div style="float:left; margin:.5em .5em .5em 0; white-space:nowrap;">
Swatch: <input type="text" id="ccc_swatch" style="width:6em; font-size:1em; color:transparent; background-color:transparent; border-color:transparent; border-width:3px; border-type:solid;">
</div>
<div style="clear:left;"></div>

<script type="text/javascript">
/*
Color Code Converter
Version 1.0
August 10, 2019
Will Bontrager Software LLC
https://www.willmaster.com/
*/
var ccc_rgb = document.getElementById("ccc_rgb");
var ccc_hex = document.getElementById("ccc_hex");
var ccc_swatch = document.getElementById("ccc_swatch");

function CCC_UpdateFromRGB()
{
    ccc_hex.value = "";
    CCC_ClearSwatch();
    var allok = true;
    var value = ccc_rgb.value;
    if( value.match(/[^\d\,]/) )
    {
        value = value.replace(/[^\d\,]/g,"");
        if( ! value.match(/[\d\,]/) ) { return; }
        allok = false;
    }
    value = value.replace(/\,\,+/g,",");
    var ta = value.split(',');
    if( ta.length != 3 ) { return; }
    if( ! ta[2].match(/\d/) ) { return; }
    var currentvalue = ( ta[0] + "," + ta[1] + "," + ta[2] );
    for( var i=0; i<3; i++ )
    {
        ta[i] = parseInt(ta[i],10);
        if( ta[i] > 255 ) { ta[i] = 255; allok = false; }
    }
    if( ! allok ) { ccc_rgb.value = ( ta[0] + "," + ta[1] + "," + ta[2] ); }
    for( var i=0; i<3; i++ )
    {
        ta[i] = ta[i].toString(16).toUpperCase();
        if( ta[i].length < 2 ) { ta[i] = "0"+ta[i]; }
    }
    var newval = ( ta[0] + ta[1] + ta[2] );
    ccc_hex.value = newval;
    CCC_UpdateSwatch(newval);
} // function CCC_UpdateFromRGB()

function CCC_UpdateFromHEX()
{
    ccc_rgb.value = "";
    CCC_ClearSwatch();
    var allok = true;
    var value = ccc_hex.value;
    if( value.match(/[^\dA-Fa-f]/) )
    {
        value = value.replace(/[^\dA-Fa-f]/g,"");
        if( ! value.match(/[\dA-Fa-f]/) ) { return; }
        var allok = false;
    }
    if( value.length != 3 && value.length != 6 ) { return; }
    if( value.length == 3 ) { value = value.substr(0,1) + value.substr(0,1) + value.substr(1,1) + value.substr(1,1) + value.substr(2,1) + value.substr(2,1); }
    if( value.length != 6 ) { return; }
    if( ! allok ) { ccc_hex.value = value; }
    ta = new Array();
    ta.push( parseInt(value.substr(0,2),16) );
    ta.push( parseInt(value.substr(2,2),16) );
    ta.push( parseInt(value.substr(4),16) );
    ccc_rgb.value = ( ta[0] + "," + ta[1] + "," + ta[2] );
    CCC_UpdateSwatch(value);
} // function CCC_UpdateFromHEX()

function CCC_ClearSwatch()
{
    ccc_swatch.style.backgroundColor = "transparent";
    ccc_swatch.style.borderColor = "transparent";
}

function CCC_UpdateSwatch(v)
{
    ccc_swatch.style.backgroundColor = "#"+v;
    ccc_swatch.style.borderColor = "#000000";
}
</script>

If you prefer not to publish the Color Code Converter on your own page, you are welcome to use the one on this page whenever occasion arises. Bookmark the page where it won't get lost.

Whenever you need to convert a HEX color number to RGB color numbers, or vice versa, this handy tool can do the job.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager