ホーム > カテゴリ > HTML5・JavaScript >

RGBとHSLの相互変換[色見本/サンプル付き]

RGB色空間とHSL色空間を相互変換します。入力はHTMLのカラーコード、RGB、HSLの値から可能でプレビュー画面にはカラーコード、css用のrgb()、hsl()や反対色、補色が表示されます。

プレビューがありますのでRGBカラーの「色見本」としてもご使用いただけます。

変換

#ff0000
rgb(255,0,0);
hsl(0,100%,50%);
反対色 #00ffff
補色 #00ffff

HTMLカラーコード
 

RGB
R  
G  
B  

HSL
H  
S  
L  

関連記事:RGBとHSVの相互変換 色相環と12色相環

HTMLのカラーコードを変更した際には、ブラウザに表示されている画面の適当な箇所をクリックすると変更が反映されます。

HTMLのカラーコードは3桁形式(#fff)と6桁形式(#ffffff)のどちらにも対応しています。3桁形式を入力すると自動的に6桁形式に変換されます。

色空間について

RGB色空間とHSL色空間の色に関する解説です。色空間はカラーモデルやカラースペースなどとも呼ばれます。

RGB色空間

RGBの「R」(red)は「赤色」で「G」(green)は緑色、「B」(blue)は青色です。この3種の原色を組み合わせて、色を再現します。これらの各範囲は0-255となります。1つの原色の範囲が256種類となりますので「256 x 256 x 256」で約1677万色の色を表現する事が可能です。

このRGBはパソコンなどで一般的に使用されています。

HSL色空間

HSL色空間の「H」(hue)は色相と呼ばれ「色合い」を調整します。範囲は0-360度です。「S」(saturation)は彩度で「鮮やかさ」を調整します。範囲は0-100%となります。「L」(lightness)は明度で「明るさ」を調整します。範囲は0-100%です。

このページの初期値が赤色になっているのは「色相」の最初の値である0度が赤色だからです。初期状態で「H」の色相だけをスライダーで変化させると色合いが変化する事がわかると思います。その変化を画像にするとこのようになります。

この変化は「赤、オレンジ、黄色、緑、水色、青、紫色」の順番で虹色となります。

彩度は100%が純色となり、彩度を落としていくと徐々に灰色になります。

明度は中間の50%が純色で0%になると黒色、100%は白色となります。

このHSL色空間はCSS3からカラー値にhsl()として使用できるようになりました。

補色と反対色

補色は色相環における相互に向かいあう色となります。詳細は色相環と12色相環の記事をご覧ください。

変換の誤差について

RGBとHSL色空間の変換は値の誤差が発生する場合があります。

サンプルプログラム

このページではRGB/HSL色空間の値を相互変換しています。その変換のサンプルプログラムをJavaScriptのコードで公開しています。

RGBからHSLの変換

// RGB色空間からHSL色空間へ変換する 
//  r(red)  : 赤色 0-255の値
//  g(green): 緑色 0-255の値
//  b(blue) : 青色 0-255の値 
function rgb2hsl(r, g, b){   
 var max = Math.max(r, g, b);
 var min = Math.min(r, g, b);   
 var hsl = {'h':0,
            's':0,
            'l':(max + min) / 2}; // L(明度)   
 
 if (max != min) {
   // H(色相)  
   if (max == r) hsl.h = 60 * (g - b) / (max-min);
   if (max == g) hsl.h = 60 * (b - r) / (max-min) + 120;
   if (max == b) hsl.h = 60 * (r - g) / (max-min) + 240;
   
   // S(彩度)
   if (hsl.l <= 127){
     hsl.s = (max - min) / (max + min);
   }else{
     hsl.s = (max - min) / (510 - max - min);
   }
 }   

 if (hsl.h < 0){
   hsl.h = hsl.h + 360;
 }
 
 hsl.h =  Math.round(hsl.h);
 hsl.s =  Math.round(hsl.s * 100);
 hsl.l =  Math.round((hsl.l / 255) * 100);     
 return hsl;   
}

HSLからRGBの変換

// HSL色空間からRGB色空間へ変換する 
//  h(hue)       : 色相/色合い       0-360度の値
//  s(saturation): 彩度/鮮やかさ     0-100%の値
//  l(lightness) : 明度/明るさ       0-100%の値 
function hsl2rgb(h, s, l){
 var max,min;
 var rgb = {'r':0,'g':0,'b':0};
 
 if (h == 360){
   h = 0;
 }
 
 if(l <= 49){
   max = 2.55 * (l + l * (s / 100));
   min = 2.55 * (l - l * (s / 100));
 }else{
   max = 2.55 * (l + (100 - l) * (s / 100));
   min = 2.55 * (l - (100 - l) * (s / 100)); 
 }  
 
 if (h < 60){
   rgb.r = max;
   rgb.g = min + (max - min) * (h / 60) ;
   rgb.b = min;
 }else if (h >= 60 &&  h < 120){
   rgb.r = min + (max - min) * ((120 - h) / 60);
   rgb.g = max ;
   rgb.b = min;    
 }else if (h >= 120 &&  h < 180){
   rgb.r = min;
   rgb.g = max ;
   rgb.b = min + (max - min) * ((h - 120) / 60);        
 }else if (h >= 180 &&  h < 240){
   rgb.r = min;
   rgb.g = min + (max - min) * ((240 - h) / 60);
   rgb.b = max;     
 }else if (h >= 240 &&  h < 300){
   rgb.r = min + (max - min) * ((h - 240) / 60);
   rgb.g = min;
   rgb.b = max;     
 }else if (h >= 300 &&  h < 360){
   rgb.r = max;
   rgb.g = min;
   rgb.b = min + (max - min) * ((360 - h) / 60); 
 } 
 
 rgb.r =  Math.round(rgb.r);
 rgb.g =  Math.round(rgb.g);
 rgb.b =  Math.round(rgb.b);
 return rgb; 
}  

参考リンク

RGB/HSL変換のロジック/計算式を参考にしたサイトです。感謝です。

HSL色空間
RGBとHSLの相互変換ツールと変換計算式
色の変換式(HSL,HSV)





関連記事



公開日:2016年02月23日 最終更新日:2016年02月24日
記事NO:01793