RGBとHSLの相互変換[色見本/サンプル付き]
RGB色空間とHSL色空間を相互変換します。入力はHTMLのカラーコード、RGB、HSLの値から可能でプレビュー画面にはカラーコード、css用のrgb()、hsl()や反対色、補色が表示されます。
プレビューがありますのでRGBカラーの「色見本」としてもご使用いただけます。
変換
rgb(255,0,0);
hsl(0,100%,50%);
反対色 #00ffff
補色 #00ffff
| HTMLカラーコード |
|---|
| RGB | ||
|---|---|---|
| R | ||
| G | ||
| B | ||
| HSL | ||
|---|---|---|
| H | ||
| S | ||
| L | ||
関連記事：RGBとHSVの相互変換 色相環と12色相環
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）
関連記事
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
