一般的に、RGB,CMY,CMYK,HSL(HLS),HSV(HSB)など、様々な表色系(カラーモデル)による表示法があり、相互変換を要する場合があります。
その変換式を紹介していきます。今回は、色の三要素をパラメータとした、HSL,HSVの解説と、RGBからHSL,HSVへの変換HSL,HSVからRGBへの変換を説明します。
HSLもHSVも、色の三要素(三属性)に基づいたモデルであり、パラメータから生成される色を、感覚的に推測しやすいのが利点です。色の三要素をどのように定義するかによって、RGB/CMYモデルからの変換法が異なるため、HSLやHSV以外にも複数のカラーモデルが存在します。---- ----・HSL方式H:色相(色合い)S:彩度(鮮やかさ)L:明度(明るさ)色の三要素で、色を表示する方法です。心理感覚量として色を指定できる利点があります。
三要素を、

比率8ビットPC°+%
H0≦h≦10≦h%≦1000≦h≦2550≦h2400≦360
S0≦s≦10≦s%≦1000≦s≦2550≦s2400≦s%≦100
L0≦l≦10≦l%≦1000≦l≦2550≦l2400≦l%≦100
----とします。任意の色Pは、P(H,S,L)=P(h,s,l)で表示できます。一般に、デザイン・ペイントの分野でよく使用されています0~255(00~FF)の8ビット(2^8=256個)よりも、カラーパレットでは、0~240で表示される場合も多いです。ただし、色相だけは、色相環を360°として、角度で表示する方がわかりやすいです。
RGBの「ミッドレンジ(最大値と最小値の相加平均)」を明度Lとするのが特徴です。彩度Sは、RGBの「最大値と最小値の差」が、「最大値と最小値の和(明度Lの2倍)*」もしくは「全体の2倍から『それ*』を引いた値」(=「全体から明度Lを引いた値」の2倍)に占める割合です。双極性のモデルになり、両極が白と黒、純色が赤道面の外周、赤道面の中心が灰となります。
S=0では無彩色となるため、Hが定義できません(R=G=Bでは、max=minとなり、max-min=0の特異点となるため、Hが計算不能max+min=0の場合、max=min=0であり特異点ですが、S=0としますmax+min=2の場合、max=min=1であり特異点ですが、S=0とします----・RGB→HSLへの変換式 max(r,g,b)=max,min(r,g,b)=minとします。
 色相h:
0~1
RGB:0~1
0~100
RGB:0~100
0~255
RGB:0~255
0~240
RGB:0~255
0~360
RGB:0~255
max=r:

h=
(1/6)×
(g-b)/(max-min)
max=r

h=
(100/6)×
(g-b)/(max-min)
max=r

h=
(255/6)×
(g-b)/(max-min)
max=r

h=
40×
(g-b)/(max-min)
max=r

h=
60×
(g-b)/(max-min)
max=g

h=
(1/6)×
(b-r)/(max-min)
+1/3
max=g

h=
(100/6)×
(b-r)/(max-min)
+100/3
max=g

h=
(255/6)×
(b-r)/(max-min)
255/3
max=g

h=
40×
(b-r)/(max-min)
+80
max=g

h=
60×
(b-r)/(max-min)
+120
max=b

h=
(1/6)×
(r-g)/(max-min)
+2/3
max=b

h=
(100/6)×
(r-g)/(max-min)
+200/3
max=b:

h=
(
255/6)×
(r-g)/(max-min)
255/3
max=b

h=
40×
(r-g)/(max-min)
+160
max=b

h=
60×
(r-g)/(max-min)
+240
※h=arctan{(√3)(g-b)/(2r-g-b)}の近似式(R:0=360°,G:120°,B:240°
 彩度s,明度l:
0~1
RGB:0~1
0~100
RGB:0~100
0~255
RGB:0~255
0~240
RGB:0~255
l≦(1/2):

s=
(max-min)
/(max+min)


l≧(1/2):

s=
(max-min)
/{2-(max+min)}
l≦50:

s=
100×
(max-min)
/
(max+min)

l≧50:

s=
100×
(max-min)
/{200-(max+min)}
l≦(255/2):

s=
255×
(max-min)
/
(max+min)

l≧(255/2):

s=
255×
(max-min)
/{2×255-(max+min)}
l≦120:

s=
240×
(max-min)
/
(max+min)

l≧120:

s=
240×
(max-min)
/{480-(max+min)}
l=
(max+min)/2
l=
(max+min)/2
l=
(max+min)/2
l=
(
240/255)×
(max+min)/2
※s=(max-min)/{1-|max+min-1|}のため、sはlの値によって変化します。①max+min-1≧0 → max+min≧1 → (max+min/2)≧1/2 → l≧(1/2)ならば、 |max+min-1|=max+min-1より、 s=(max-min)/{1-|max+min-1|}=(max-min)/{2-(max+min)}max+min-1≧0 → max+min≧1 → (max+min/2)≧1/2 → l≧(1/2)ならば、 |max+min-1|=-(max+min-1)より、 s=(max-min)/{1-|max+min-1|}=(max-min)/(max+min)
・HSL→RGBへの変換式
0~1
SV:0~1
0~100
SV:0~100
0~255
SV:0~255
0~240
SV:0~240
maxl≦(1/2):

(1+s)l
=l+sl

l≧(1/2):

(1-s)l+s
=l+(1-l)s
l≦50:

(1+s/100)l

=l+sl/100

l≧50

(1-s/100)l+s
=l+(1-l/100)s
l≦(255/2):

(1+s/255)l

=l+sl/255

l≧(255/2):

(1-s/255)l+s
=l+(1-l/255)s
l≦120:

(1+s/240)l

=l+sl/240

l≧120

(1-s/240)l+s
=l+(1-l/240)s
minl≦(1/2):

(1-s)l
l-sl

l≧(1/2):

(1+s)l-s

l-(1-l)s
l≦50

(1-s/100)l
l-sl/100

l≧50

(1+s/100)l-s

l-(1-l/100)s
l≦(255/2):

(1-s/255)l
l-sl/255

l≧(255/2):

(1+s/255)l-s

l-(1-l/255)s
l≦120

(1-s/240)l
l-sl/240

l≧120

(1+s/240)l-s

l-(1-l/240)s
l≦(1/2)ならば、d=max-min=(1+s)l-(1-s)l=l+sl-(1-sl)=2sll≧(1/2)ならば、d=max-min(1-s)l+s-{(1+s)l-s}=l-sl+s-(1+sl-s)=2s-2sl=2s(1-l)
※※色相で場合分け※※へ---- 比較1.png---- ----・HSV方式H:色相(色合い)S:彩度(鮮やかさ)V:輝度(明るさ)色の三要素で、色を表示する方法です。心理感覚量として色を指定できる利点があります。
三要素を、
比率8ビットPC°+%
H0≦h≦10≦h%≦1000≦h≦2550≦h2400≦360
S0≦s≦10≦s%≦1000≦s≦2550≦s2400≦s%≦100
V0≦v≦10≦v%≦1000≦v≦2550≦v2400≦v%≦100
----とします。任意の色Pは、P(H,S,V)=P(h,s,v)で表示できます。一般に、デザイン・ペイントの分野でよく使用されています0~255(00~FF)の8ビット(2^8=256個)よりも、カラーパレットでは、0~240で表示される場合も多いです。ただし、色相だけは、色相環を360°として、角度で表示する方がわかりやすいです。
RGBの「最大値」を明度Vとするのが特徴です。彩度Sは、RGBの「最大値と最小値の差」が、「明度V」に占める割合です。単極性のモデルになり、下極が黒、純色が上面の外周、上面の中心が白となります。
S=0では無彩色となるため、Hが定義できません(R=G=Bでは、max=minとなり、max-min=0の特異点となるため、Hが計算不能max=0の場合、max=min=0であり特異点ですが、S=0とします----・RGB→HSVへの変換式 max(r,g,b)=max,min(r,g,b)=minとします。 色相h:
0~1
RGB:0~1
0~100
RGB:0~100
0~255
RGB:0~255
0~240
RGB:0~255
0~360
RGB:0~255
max=r:

h=
(1/6)×
(g-b)/(max-min)
max=r

h=
(100/6)×
(g-b)/(max-min)
max=r

h=
(255/6)×
(g-b)/(max-min)
max=r

h=
40×
(g-b)/(max-min)
max=r

h=
60×
(g-b)/(max-min)
max=g

h=
(1/6)×
(b-r)/(max-min)
+1/3
max=g

h=
(100/6)×
(b-r)/(max-min)
+100/3
max=g

h=
(255/6)×
(b-r)/(max-min)
255/3
max=g

h=
40×
(b-r)/(max-min)
+80
max=g

h=
60×
(b-r)/(max-min)
+120
max=b

h=
(1/6)×
(r-g)/(max-min)
+2/3
max=b

h=
(100/6)×
(r-g)/(max-min)
+200/3
max=b:

h=
(
255/6)×
(r-g)/(max-min)
255/3
max=b

h=
40×
(r-g)/(max-min)
+160
max=b

h=
60×
(r-g)/(max-min)
+240
※h=arctan{(√3)(g-b)/(2r-g-b)}の近似式(R:0=360°,G:120°,B:240°
 彩度s,明度v:
0~1
RGB:0~1
0~100
RGB:0~100
0~255
RGB:0~255
0~240
RGB:0~255
s=
(max-min)/max
s=
100×(max-min)/max
s=
255×(max-min)/max
s=
240×(max-min)/max
v=
max
v=
max
v=
max
v=
(
240/255)×max

・HSV→RGBへの変換式
0~1
SV:0~1
0~100
SV:0~100
0~255
SV:0~255
0~255
SV:0~240
max=max(r,g,b)vvv255×v/240
min=min(r,g,b)(1-s)v
v-sv
(1-s/100)v
v-sv/100
(1-s/255)v
v-sv/255
255×(1-s/240)(v/240)
(255/240)×(v-sv/240)
※d=max-min=v-(1-s)v=v-(v-sv)=sv
※※色相で場合分け※※へ---- 比較2.png---- ----・HSL/HSV→RGBへの変換式※※色相で場合分け※※①0~1(H:0~1)②0~100(H:0~100)③0~255(H:0~255)④0~255(H:0~240)⑤0~255(H:0~360)
H
0~1/6
0/6
 ~100/6
0
 ~255/6

0~40
0~60
H
1/6~1/3
100/6
 ~200/6
255/6
 ~255/3
40~80
60~120
H
1/3
~1/2
200/6
 ~300/6
255/3
 ~255/2
80~120
120~180
H
1/2~2/3
300/6
 ~400/6
255/2
 ~2×255/3

120~160
180~240
H
2/3~5/6
400/6
 ~500/6
2×255/3
 ~5×255
/6
160~200
240~300
H
5/6~1
500/6
 ~600/6
5×255/6
 ~255
200~240
300~360
r=maxr=
(2-6h)d
+min

(2-6h/100)
d
+min

(2-6h/255)
d
+min


{
(80-h)/40}d
+min

{
(120-h)/60}d
+min
r=minr=minr=
(6h-4)d
+min

(6h/100-4)
d
+min

(6h/255-4)
d
+min


{
(h-160)/40}d
+min

{
(h-240)/60}d
+min
r=max
g=
6hd
+min


(6h/100)
d
+min

(6h/255
d)
+min


(h/40)
d
+min

(h/60)
d
+min
g=maxg=maxg=
(4-6h)d+
min


(4-6h/100)
d
+min

(4-6h/255)
d
+min


{
(160-h)/40}d
+min

{
(240-h)/60}d
+min
g=ming=min
b=minb=minb=
(6h-2)d
+min

(6h/100-2)
d
+min

(6h/255-2)
d
+min


{
(h-80)/40}d
+min

{
(h-120)/60}d
+min
b=maxb=maxb=
(6-6h)d
+min

(6-6h/100)
d
+min

(6-6h/255)
d
+min


{
(240-h)/40}d
+min

{
(360-h)/60}d
+min
HSL L≦(1/2)の場合:※6hd+min=6h(max-min)min=6h×2sl+min=12hsl(1-s)l=12hsll-lsHSL L≧(1/2)の場合:※6hdmin=6h(max-min)min=6h×2s(1-l)min12hs(1-l)l-(1-l)s
HSVの場合:※6hdmin=6h(max-min)min=6h×svmin=6hsv(1-s)v 色2.png---- ----<公式のまとめ> R,G,B=0~1 H=0~360°(HSL方式,HSV方式) S,L=0~1(HSL方式) Sv,V=0~1(HSV方式)
RGB→HSL,RGB→HSV RGBは、MaxもしくはMinで場合分けして、Hを求めます。 Maxでの場合分けがわかりやすいですが、H=0を挟むため、 H<0であればH+360にする操作が必要となります。 Minでの場合分けでは、H=0を挟まないので、煩雑さがありません。 Sと、LおよびVは、MaxとMinから求められます。公式1.pngHSL→RGB,HSV→RGB HSL,HSVは、いったんMax,Minを求め、Hで場合分けしてRGBそれぞれを求めます。 公式2.png---- ----

このノートのライターが設定した関連知恵ノート

  • 色の変換式(RGB,CMY,CMYK)