RGBからHSLへ色の変換を行う

【オプションの設定】
【生成色とCSSカラー】





【RGBで指定】        10進,16進 
赤:
緑:
青:

【HSLで指定】(H=0~360,S&L=0%~100%)
H:
S:
L:

【CMYKで指定】
C:
M:
Y:
K:

【HSVで指定】(H=0~360,S&L=0%~100%)
H:
S:
V:

使い方

色の指定は、スライダーバーをドラッグしたりクリックしたりするか、数字を直接入力して行ないます。 色を指定すると全ての色や数値、またスライダーバーの位置が自動的に再計算され最新になります。 生成色(作った色)は、RGBの16進数表記、RGBの10進数表記、HSL,CMYK,HSV(HSB)で自動的に計算されます。 RGBの16進数表記とRGBの10進数表記とHSLはCSSで直接使える形式で表示されますので、クリップボードへコピーすればそのまま使えます。 また、RGB,HSL,CMYK,HSV(HSB)が自動的に再計算されますので、色の変換ツールとしても使えます。 スマートフォンと「Google Chrome」と「Mozilla Firefox」でテストしています。 「Microsoft Edge」と「Microsoft Internet Explorer」はスライダーバーの色などが多少ずれますが、使用上は問題ありません。 (CSS3で綺麗なボタンを使っていますので「Microsoft Edge」と「Microsoft Internet Explorer」の表示には完全に対応できていませんが、近いうちに解決する予定です。) 「背景を「設定した色」にする」オプションをチェックすると(デフォルトはチェック)、背景色も「設定した色」に自動的に更新されます。 チェックを外すと背景色は白色になります。

RGBとは

「光の3原色」は「赤(Red)」、「緑(Green)」、「青(Blue)」である。 RGBはすべての色を赤(Red)(0~255)、緑(Green)(0~255)、青(Blue)(0~255)の「色の3原色」の強さを使って表すカラーモデルである。 RGBは通常8ビットで色の強さを表し、それらの組み合わせで色を作る。8ビットで表現できる色は256色あり、RGBの3色を組み合わせると256×256×256で、約1670万色となる。 そのため、色の強さは0から255の256段階で表す。16進数では「0」から「FF」の256段階になる。 またRGBは(CMYKとは逆で)色が光であるため、色を混ぜれば混ぜるほど明るくなり白色に近づいていく。そのため「加法混色」と言われる。

HSLとは

HSLは、色を「色相(Hue)」(0~360)、「彩度(Saturation)」(0%~100%)、「輝度(Lightness)」(0%~100%)の3要素で表現するカラーモデル。色相は色の種類を表すもので、0度から360度までの角度で指定する。0度は赤色、120度は緑色、240度は青色を表す。反対側の色は補色になる。彩度は色の鮮やかさを表し、100%が最も鮮やかで、値が下がるにつれて色がくすんでいき、0%は灰色を表す。輝度は明るさを表し、100%で白、50%で純色、0%で黒となる。

CMYKとは

「色の3原色」は「シアン(Cyan)」、「マゼンタ(Magenta)」、「イエロー(Yellow)」)である。 CMYKは、色を「色の3原色」である「シアン(Cyan)」(0%~100%)、「マゼンタ(Magenta)」(0%~100%)、「イエロー(Yellow)」(0%~100%)と 「キー・プレート(Key plate)」(0%~100%)(通常黒色)の4種類で表すカラーモデルである。 「色の3原色」(「シアン」、「マゼンタ」、「イエロー」)を使って色を表すため、印刷業界でよく使われる。 RGBでは色が光であるため、色を混ぜれば混ぜるほど明るくなり白色に近づいていく。そのため「加法混色」と言われる。 一方、CMYKでは、色は顔料や染料などの色料であるため、これらを混ぜれば混ぜるほど色が暗くなり、理論上は黒色に近づいていく。 そのため『減法混色』と言われる。 理論上は「色の3原色」の「シアン(C)」と「マゼンタ(M)」と「イエロー(Y)」で全ての色を表現できるはずであるが、 実際には「シアン」、「マゼンタ」、「イエロー」の3色を混合しても綺麗な黒色にはならず、せいぜい鈍い暗い黒色にしかならない。 このため、プリンターなどの印刷機で黒色をより美しく表現する目的として、 「キー・プレート(K)」(通常黒色)インクを混合して綺麗な黒色を表現する。 「キー・プレート(K)」(黒色)を追加するには他にも理由がある。 1つには黒を表現するのに必要なインク量が少なくなり印刷コストが下がる。また、乾燥時間が速くなり高速印刷に向くといったメリットもある。 なおこのシステムで「キー・プレート(K)」(黒色)を0にしてRGBとCMYKを比較すると、 「シアン(C)」、「マゼンタ(M)」、「イエロー(Y)」の数値はそれぞれ「赤(R)」、「緑(G)」、「青(B)」の数値の反対になることがわかる。 実際に、「シアン(C)」は「赤(R)」の補色であり、「マゼンタ(M)」は「緑(G)」の補色であり、「イエロー(Y)」は「青(B)」の補色である。

HSV(HSB)とは

HSV(HSB)は、色を「色相(Hue)」(0~360)、「彩度(Saturation)」(0%~100%)、「明度(Value)」(0%~100%)の3要素で表現するカラーモデル。HSB(BはBrightness)とも呼ばれる。色相は色の種類を表すもので、0度から360度までの角度で指定する。0度は赤色、120度は緑色、240度は青色を表す。反対側の色は補色になる。 彩度は色の鮮やかさを表し、100%が最も鮮やかで、値が下がるにつれて色がくすんでいき、0%は灰色を表す。明度は色の明るさを表す。





Web長さの単位変換Web重さの単位変換面積の単位変換体積の単位変換色の生成・変換RGB色作成HSL色の生成HSV色作成CMYK色の生成
【関連リンク】
【QRコードの仕組み】QRコードの仕組みと作成・作り方と変換方法く、  多機能QR、  ColorfulQRCodeMaker
西光寺 西光寺 西光寺 西光寺 西光寺 西光寺 西光寺