Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryGenerators and Converters

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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.

Let's see it as an illustration.

TESTING

In the above illustration, the rectangle that partially covers the word "TESTING" has a #FF1234 HEX-color border and a rgba(255,18,52,.5) RGB-color background. The last value list of the rgba() function, the .5 value, specifies that the color be half opaque. (.9 would be mostly opaque and .1 would be mostly transparent.)

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.

Color Code Converter

RGB:
HEX: #
Swatch:

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC