HLS色空間
[Wikipedia|▼Menu]
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この記事は検証可能参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。(このテンプレートの使い方
出典検索?: "HLS色空間" ? ニュース ・ 書籍 ・ スカラー ・ CiNii ・ J-STAGE ・ NDL ・ dlib.jp ・ ジャパンサーチ ・ TWL(2019年1月)

HLS色空間(エイチエルエスいろくうかん)とは、色相 (Hue)、彩度 (Saturation)、輝度(Lightness / Luminance または Intensity)の3つの成分からなる色空間HSV色空間によく似ている。HSL、HSIと呼ばれることもある。HLS色空間のカラーモデル
色相
色味を0から360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
彩度
HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
輝度
明度100%を純色としてそこからどれだけ明るさが失われるかで表すHSVとは違い、輝度0 %を黒、100 %を白とし、その中間 (50 %) を純色とする。50 %以下はHSVの明度を示し、50 %以上はHSVの彩度を示すと考えると分かりやすいだろう。

HLS色空間を使う代表的なアプリケーションとしては、Microsoft Windows(ペイントを含む)、CSS3Paint Shop ProInkscape など。
RGBからHLS (HSL) への変換

H = { undefined, if  M I N = M A X 60 × G − R M A X − M I N + 60 , if  M I N = B 60 × B − G M A X − M I N + 180 , if  M I N = R 60 × R − B M A X − M I N + 300 , if  M I N = G L = M A X + M I N 2 {\displaystyle {\begin{aligned}H&={\begin{cases}{\text{undefined,}}&{\text{if }}\mathrm {MIN} =\mathrm {MAX} \\60\times {\frac {G-R}{\mathrm {MAX} -\mathrm {MIN} }}+60,&{\text{if }}\mathrm {MIN} =B\\60\times {\frac {B-G}{\mathrm {MAX} -\mathrm {MIN} }}+180,&{\text{if }}\mathrm {MIN} =R\\60\times {\frac {R-B}{\mathrm {MAX} -\mathrm {MIN} }}+300,&{\text{if }}\mathrm {MIN} =G\end{cases}}\\L&={\frac {\mathrm {MAX} +\mathrm {MIN} }{2}}\end{aligned}}}
双円錐モデル
S = M A X − M I N {\displaystyle S=\mathrm {MAX} -\mathrm {MIN} \,}
円柱モデル
S = M A X − M I N 1 − 。 M A X + M I N − 1 。 {\displaystyle S={\frac {\mathrm {MAX} -\mathrm {MIN} }{1-|\mathrm {MAX} +\mathrm {MIN} -1|}}}

双円錐モデルと円柱モデルがあり、彩度の定義が異なるため、注意が必要である。
RGBへの変換

RGBへ変換する際には、いったん最大値や最小を求める必要がある。
HSLの円柱モデルからの変換
M a x = L + S × ( 1 − 。 2 × L − 1 。 ) 2 {\displaystyle Max=L+{\frac {S\times (1-|2\times L-1|)}{2}}} M i n = L − S × ( 1 − 。 2 × L − 1 。 ) 2 {\displaystyle Min=L-{\frac {S\times (1-|2\times L-1|)}{2}}}
HSLの円錐モデルからの変換
M a x = L + S 2 {\displaystyle Max=L+{\frac {S}{2}}} M i n = L − S 2 {\displaystyle Min=L-{\frac {S}{2}}}

求めた最大値と最小値を、色相で場合分けした上で、RGBの各チャンネルに代入する。

( R , G , B ) = { ( Max = Min , Max = Min , Max = Min ) if  H  is undefined ( Max , Min + ( Max − Min ) × H 60 , Min ) if  0 ≤ H < 60 ( Min + ( Max − Min ) × 120 − H 60 , Max , Min ) if  60 ≤ H < 120 ( Min , Max , Min + ( Max − Min ) × H − 120 60 ) if  120 ≤ H < 180 ( Min , Min + ( Max − Min ) × 240 − H 60 , Max ) if  180 ≤ H < 240 ( Min + ( Max − Min ) × H − 240 60 , Min , Max ) if  240 ≤ H < 300 ( Max , Min , Min + ( Max − Min ) × 360 − H 60 ) if  300 ≤ H < 360 {\displaystyle {\begin{aligned}(R,G,B)&={\begin{cases}({\text{Max}}={\text{Min}},{\text{Max}}={\text{Min}},{\text{Max}}={\text{Min}})&{\mbox{if }}H{\mbox{ is undefined}}\\({\text{Max}},{\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {H}{60}},{\text{Min}})&{\mbox{if }}0\leq H<60\\({\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {120-H}{60}},{\text{Max}},{\text{Min}})&{\mbox{if }}60\leq H<120\\({\text{Min}},{\text{Max}},{\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {H-120}{60}})&{\mbox{if }}120\leq H<180\\({\text{Min}},{\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {240-H}{60}},{\text{Max}})&{\mbox{if }}180\leq H<240\\({\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {H-240}{60}},{\text{Min}},{\text{Max}})&{\mbox{if }}240\leq H<300\\({\text{Max}},{\text{Min}},{\text{Min}}+({\text{Max}}-{\text{Min}})\times {\frac {360-H}{60}})&{\mbox{if }}300\leq H<360\end{cases}}\end{aligned}}}

色相が定義されない場合は、彩度=0であり、全てのチャンネルが明度や輝度に等しくなる(最大値=最小値)。










色彩
基礎的事象

可視光 · 色覚 · 色覚異常 · 色覚恒常(英語版)

基礎的概念

色彩理論(英語版) · 色空間 · 配色 · 補色 · 暖色 · 寒色 · 加法混合 · 減法混合 · 色名 · 原色 · 純色 · 有彩色 · 無彩色 · 二次色 · 三次色(英語版) · 中間色 · ホワイトバランス · アルファブレンド


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:36 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef