記事の内容なんてどうでもいいから変換したい方はこちら→RGB to RGBA変換ツール

ググったら逆パターン（RGBA→RGB）の記事は結構でてきて変換ツール等も沢山出てきたけどRGBからRGBAに変換は日本語記事が見当たらなかったのでメモ。

ちなみに逆パターンの一番簡単な方法は表示させてスクリーンショットしてフォトショとかイラレのスポイトツールでチェックしてやれば計算なんてしなくてもRGB化できます。

変換ツールとかも結構あります。

yolijn.com　|　convert rgba() to rgb()

けどRGB→RGBAは結構厄介で透明度と色の組み合わせによってはほぼ不可能な場合もある。

ググっても中々分かり易い答えが出てこないし数学の得意な人なら背景色も含めての計算も出来るのかもしれませんが、僕にはノーアイデアです。

準備（16進数→RGB）

変換したいけど#121212みたいな16進数カラーコードしかわからないという方はまずこちらでRGBへ変換してください。

16進数(HEX)からRGBへの変換。

RGB→RGBA

では本題へ移ります。

早速白背景（255,255,255）計算式。

今回僕がやりたかったピンクっぽい227,97,81を参考に説明します。

まず透過したいカラーのRGB値から一番低い値を取ります。（81）

次に背景色の値を取ります。（255）

(背景色) – (一番低いRGB値)　/　(背景色)　=　透過度

が求められます。（理由は分かりません。）

(255-81)/255 = 0.682352….　=　68%

次にこの透過度を使ってRGBAの値を求めていきます。

(RGB値) – (一番低いRGB値)　/ 透過度

この式にそれぞれの値を入れて計算します。

Red:(227-81)/0.68 = 214.7058….
Green:(97-81)/0.68 = 23.5294
Blue:(81-81)/0.68 = 0
Alpha:0.68

つまりRGB(227,97,81)は大体RGBA(215,24,0,.68)と書き換えられます。

この計算式を元にjQueryとJavaScriptを使った簡単なツールも作ってみました。

RGB to RGBA変換ツール

ツールのソースはこちら。

//HTML

  Red:

  

  Green:

  

  Blue:

  

  

Original Color:


Alpha Channel:

//CSS
   body{
    background: #FFF;
  }
  .box{
    width:200px;
    height:100px;
    background-image:url(hoshi.png);
    background-repeat:no-repeat;
    background-position: center;
  }
  .inner{
    width:100%;
    height:100px;
  }

//JS
function check(txt){
    var str = txt.value;
    if(str.match(/[^0-9]+/)){
        alert("数字半角のみ入力可。");
        txt.value = str.replace(/[^0-9]+/g,"");
    }
};

function RGBtoRGBA(){
    r = parseFloat(document.Cvt.R.value);
    g = parseFloat(document.Cvt.G.value);
    b = parseFloat(document.Cvt.B.value);
    var original = 'rgb('+r+','+g+','+b+')';
    if(r<256 && r>=0 && g<256 && g>=0 && b<256 && b>=0){
    min = Math.min(r,g,b);
    alpha = (255 - min) / 255;    
    ra = Math.round((r - min) / alpha);
    ga = Math.round((g - min) / alpha);
    ba = Math.round((b - min) / alpha);
    alpha = Math.round(alpha * 100) / 100; 
    channel = 'rgba('+ra+','+ga+','+ba+','+alpha+')';
    $(function(){ 
      $('.appended').remove();
      $('#original').css('background-color',original).append(''+original+'');
      $('#alphaChannel').css('background-color',channel).append(''+channel+'');
    });
    }else{
    alert('0-255までの数値で入力してください');
    }
}

上のツールは入力の時点で例外を弾いた簡易的なコードですが詳しく処理すると以下のようになるみたいです。

function RGBtoRGBA(r, g, b){
    if((g==void 0) && (typeof r == 'string')){
        r = r.replace(/^\s*#|\s*$/g, '');
        if(r.length == 3){
            r = r.replace(/(.)/g, '$1$1');
        }
        g = parseInt(r.substr(2, 2), 16);
        b = parseInt(r.substr(4, 2), 16);
        r = parseInt(r.substr(0, 2), 16);
    }

    var min, a = ( 255 - (min = Math.min(r, g, b)) ) / 255;

    return {
        r    : r = 0|( r - min ) / a,
        g    : g = 0|( g - min ) / a,
        b    : b = 0|( b - min ) / a,
        a    : a = (0|1000*a)/1000,
        rgba : 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'
    };
}

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') == 
    {
       r    : 170,
       g    : 85 ,
       b    : 0  ,
       a    : 0.6,
       rgba : 'rgba(170, 85, 0, 0.6)' 
    }

参考：

Convert RGB–>RGBA
-stackoverflow-