LoginSignup
95

More than 1 year has passed since last update.

Webセーフカラーのカラーコード一覧

Last updated at Posted at 2020-11-22

カラーコード一覧

Webセーフカラーについて調べたので、カラーコード一覧をまとめました。
※ $HSV$の取りうる値の範囲は、$0 \le H \le 360,~~ 0 \le S, V \le 255$としています。

カラーコード $(R, G, B)$ $(H, S, V)$ 補色 反対色
#000000 $(0, 0, 0)$ $(0, 0, 0)$ #000000 #ffffff
#000033 $(0, 0, 51)$ $(240, 255, 51)$ #333300 #ffffcc
#000066 $(0, 0, 102)$ $(240, 255, 102)$ #666600 #ffff99
#000099 $(0, 0, 153)$ $(240, 255, 153)$ #999900 #ffff66
#0000cc $(0, 0, 204)$ $(240, 255, 204)$ #cccc00 #ffff33
#0000ff $(0, 0, 255)$ $(240, 255, 255)$ #ffff00 #ffff00
#003300 $(0, 51, 0)$ $(120, 255, 51)$ #330033 #ffccff
#003333 $(0, 51, 51)$ $(180, 255, 51)$ #330000 #ffcccc
#003366 $(0, 51, 102)$ $(210, 255, 102)$ #663300 #ffcc99
#003399 $(0, 51, 153)$ $(220, 255, 153)$ #996600 #ffcc66
#0033cc $(0, 51, 204)$ $(225, 255, 204)$ #cc9900 #ffcc33
#0033ff $(0, 51, 255)$ $(228, 255, 255)$ #ffcc00 #ffcc00
#006600 $(0, 102, 0)$ $(120, 255, 102)$ #660066 #ff99ff
#006633 $(0, 102, 51)$ $(150, 255, 102)$ #660033 #ff99cc
#006666 $(0, 102, 102)$ $(180, 255, 102)$ #660000 #ff9999
#006699 $(0, 102, 153)$ $(200, 255, 153)$ #993300 #ff9966
#0066cc $(0, 102, 204)$ $(210, 255, 204)$ #cc6600 #ff9933
#0066ff $(0, 102, 255)$ $(216, 255, 255)$ #ff9900 #ff9900
#009900 $(0, 153, 0)$ $(120, 255, 153)$ #990099 #ff66ff
#009933 $(0, 153, 51)$ $(140, 255, 153)$ #990066 #ff66cc
#009966 $(0, 153, 102)$ $(160, 255, 153)$ #990033 #ff6699
#009999 $(0, 153, 153)$ $(180, 255, 153)$ #990000 #ff6666
#0099cc $(0, 153, 204)$ $(195, 255, 204)$ #cc3300 #ff6633
#0099ff $(0, 153, 255)$ $(204, 255, 255)$ #ff6600 #ff6600
#00cc00 $(0, 204, 0)$ $(120, 255, 204)$ #cc00cc #ff33ff
#00cc33 $(0, 204, 51)$ $(135, 255, 204)$ #cc0099 #ff33cc
#00cc66 $(0, 204, 102)$ $(150, 255, 204)$ #cc0066 #ff3399
#00cc99 $(0, 204, 153)$ $(165, 255, 204)$ #cc0033 #ff3366
#00cccc $(0, 204, 204)$ $(180, 255, 204)$ #cc0000 #ff3333
#00ccff $(0, 204, 255)$ $(192, 255, 255)$ #ff3300 #ff3300
#00ff00 $(0, 255, 0)$ $(120, 255, 255)$ #ff00ff #ff00ff
#00ff33 $(0, 255, 51)$ $(132, 255, 255)$ #ff00cc #ff00cc
#00ff66 $(0, 255, 102)$ $(144, 255, 255)$ #ff0099 #ff0099
#00ff99 $(0, 255, 153)$ $(156, 255, 255)$ #ff0066 #ff0066
#00ffcc $(0, 255, 204)$ $(168, 255, 255)$ #ff0033 #ff0033
#00ffff $(0, 255, 255)$ $(180, 255, 255)$ #ff0000 #ff0000
#330000 $(51, 0, 0)$ $(0, 255, 51)$ #003333 #ccffff
#330033 $(51, 0, 51)$ $(300, 255, 51)$ #003300 #ccffcc
#330066 $(51, 0, 102)$ $(270, 255, 102)$ #336600 #ccff99
#330099 $(51, 0, 153)$ $(260, 255, 153)$ #669900 #ccff66
#3300cc $(51, 0, 204)$ $(255, 255, 204)$ #99cc00 #ccff33
#3300ff $(51, 0, 255)$ $(252, 255, 255)$ #ccff00 #ccff00
#333300 $(51, 51, 0)$ $(60, 255, 51)$ #000033 #ccccff
#333333 $(51, 51, 51)$ $(0, 0, 51)$ #333333 #cccccc
#333366 $(51, 51, 102)$ $(240, 127, 102)$ #666633 #cccc99
#333399 $(51, 51, 153)$ $(240, 170, 153)$ #999933 #cccc66
#3333cc $(51, 51, 204)$ $(240, 191, 204)$ #cccc33 #cccc33
#3333ff $(51, 51, 255)$ $(240, 204, 255)$ #ffff33 #cccc00
#336600 $(51, 102, 0)$ $(90, 255, 102)$ #330066 #cc99ff
#336633 $(51, 102, 51)$ $(120, 127, 102)$ #663366 #cc99cc
#336666 $(51, 102, 102)$ $(180, 127, 102)$ #663333 #cc9999
#336699 $(51, 102, 153)$ $(210, 170, 153)$ #996633 #cc9966
#3366cc $(51, 102, 204)$ $(220, 191, 204)$ #cc9933 #cc9933
#3366ff $(51, 102, 255)$ $(225, 204, 255)$ #ffcc33 #cc9900
#339900 $(51, 153, 0)$ $(100, 255, 153)$ #660099 #cc66ff
#339933 $(51, 153, 51)$ $(120, 170, 153)$ #993399 #cc66cc
#339966 $(51, 153, 102)$ $(150, 170, 153)$ #993366 #cc6699
#339999 $(51, 153, 153)$ $(180, 170, 153)$ #993333 #cc6666
#3399cc $(51, 153, 204)$ $(200, 191, 204)$ #cc6633 #cc6633
#3399ff $(51, 153, 255)$ $(210, 204, 255)$ #ff9933 #cc6600
#33cc00 $(51, 204, 0)$ $(105, 255, 204)$ #9900cc #cc33ff
#33cc33 $(51, 204, 51)$ $(120, 191, 204)$ #cc33cc #cc33cc
#33cc66 $(51, 204, 102)$ $(140, 191, 204)$ #cc3399 #cc3399
#33cc99 $(51, 204, 153)$ $(160, 191, 204)$ #cc3366 #cc3366
#33cccc $(51, 204, 204)$ $(180, 191, 204)$ #cc3333 #cc3333
#33ccff $(51, 204, 255)$ $(195, 204, 255)$ #ff6633 #cc3300
#33ff00 $(51, 255, 0)$ $(108, 255, 255)$ #cc00ff #cc00ff
#33ff33 $(51, 255, 51)$ $(120, 204, 255)$ #ff33ff #cc00cc
#33ff66 $(51, 255, 102)$ $(135, 204, 255)$ #ff33cc #cc0099
#33ff99 $(51, 255, 153)$ $(150, 204, 255)$ #ff3399 #cc0066
#33ffcc $(51, 255, 204)$ $(165, 204, 255)$ #ff3366 #cc0033
#33ffff $(51, 255, 255)$ $(180, 204, 255)$ #ff3333 #cc0000
#660000 $(102, 0, 0)$ $(0, 255, 102)$ #006666 #99ffff
#660033 $(102, 0, 51)$ $(330, 255, 102)$ #006633 #99ffcc
#660066 $(102, 0, 102)$ $(300, 255, 102)$ #006600 #99ff99
#660099 $(102, 0, 153)$ $(280, 255, 153)$ #339900 #99ff66
#6600cc $(102, 0, 204)$ $(270, 255, 204)$ #66cc00 #99ff33
#6600ff $(102, 0, 255)$ $(264, 255, 255)$ #99ff00 #99ff00
#663300 $(102, 51, 0)$ $(30, 255, 102)$ #003366 #99ccff
#663333 $(102, 51, 51)$ $(0, 127, 102)$ #336666 #99cccc
#663366 $(102, 51, 102)$ $(300, 127, 102)$ #336633 #99cc99
#663399 $(102, 51, 153)$ $(270, 170, 153)$ #669933 #99cc66
#6633cc $(102, 51, 204)$ $(260, 191, 204)$ #99cc33 #99cc33
#6633ff $(102, 51, 255)$ $(255, 204, 255)$ #ccff33 #99cc00
#666600 $(102, 102, 0)$ $(60, 255, 102)$ #000066 #9999ff
#666633 $(102, 102, 51)$ $(60, 127, 102)$ #333366 #9999cc
#666666 $(102, 102, 102)$ $(0, 0, 102)$ #666666 #999999
#666699 $(102, 102, 153)$ $(240, 84, 153)$ #999966 #999966
#6666cc $(102, 102, 204)$ $(240, 127, 204)$ #cccc66 #999933
#6666ff $(102, 102, 255)$ $(240, 153, 255)$ #ffff66 #999900
#669900 $(102, 153, 0)$ $(80, 255, 153)$ #330099 #9966ff
#669933 $(102, 153, 51)$ $(90, 170, 153)$ #663399 #9966cc
#669966 $(102, 153, 102)$ $(120, 84, 153)$ #996699 #996699
#669999 $(102, 153, 153)$ $(180, 84, 153)$ #996666 #996666
#6699cc $(102, 153, 204)$ $(210, 127, 204)$ #cc9966 #996633
#6699ff $(102, 153, 255)$ $(220, 153, 255)$ #ffcc66 #996600
#66cc00 $(102, 204, 0)$ $(90, 255, 204)$ #6600cc #9933ff
#66cc33 $(102, 204, 51)$ $(100, 191, 204)$ #9933cc #9933cc
#66cc66 $(102, 204, 102)$ $(120, 127, 204)$ #cc66cc #993399
#66cc99 $(102, 204, 153)$ $(150, 127, 204)$ #cc6699 #993366
#66cccc $(102, 204, 204)$ $(180, 127, 204)$ #cc6666 #993333
#66ccff $(102, 204, 255)$ $(200, 153, 255)$ #ff9966 #993300
#66ff00 $(102, 255, 0)$ $(96, 255, 255)$ #9900ff #9900ff
#66ff33 $(102, 255, 51)$ $(105, 204, 255)$ #cc33ff #9900cc
#66ff66 $(102, 255, 102)$ $(120, 153, 255)$ #ff66ff #990099
#66ff99 $(102, 255, 153)$ $(140, 153, 255)$ #ff66cc #990066
#66ffcc $(102, 255, 204)$ $(160, 153, 255)$ #ff6699 #990033
#66ffff $(102, 255, 255)$ $(180, 153, 255)$ #ff6666 #990000
#990000 $(153, 0, 0)$ $(0, 255, 153)$ #009999 #66ffff
#990033 $(153, 0, 51)$ $(340, 255, 153)$ #009966 #66ffcc
#990066 $(153, 0, 102)$ $(320, 255, 153)$ #009933 #66ff99
#990099 $(153, 0, 153)$ $(300, 255, 153)$ #009900 #66ff66
#9900cc $(153, 0, 204)$ $(285, 255, 204)$ #33cc00 #66ff33
#9900ff $(153, 0, 255)$ $(276, 255, 255)$ #66ff00 #66ff00
#993300 $(153, 51, 0)$ $(20, 255, 153)$ #006699 #66ccff
#993333 $(153, 51, 51)$ $(0, 170, 153)$ #339999 #66cccc
#993366 $(153, 51, 102)$ $(330, 170, 153)$ #339966 #66cc99
#993399 $(153, 51, 153)$ $(300, 170, 153)$ #339933 #66cc66
#9933cc $(153, 51, 204)$ $(280, 191, 204)$ #66cc33 #66cc33
#9933ff $(153, 51, 255)$ $(270, 204, 255)$ #99ff33 #66cc00
#996600 $(153, 102, 0)$ $(40, 255, 153)$ #003399 #6699ff
#996633 $(153, 102, 51)$ $(30, 170, 153)$ #336699 #6699cc
#996666 $(153, 102, 102)$ $(0, 84, 153)$ #669999 #669999
#996699 $(153, 102, 153)$ $(300, 84, 153)$ #669966 #669966
#9966cc $(153, 102, 204)$ $(270, 127, 204)$ #99cc66 #669933
#9966ff $(153, 102, 255)$ $(260, 153, 255)$ #ccff66 #669900
#999900 $(153, 153, 0)$ $(60, 255, 153)$ #000099 #6666ff
#999933 $(153, 153, 51)$ $(60, 170, 153)$ #333399 #6666cc
#999966 $(153, 153, 102)$ $(60, 84, 153)$ #666699 #666699
#999999 $(153, 153, 153)$ $(0, 0, 153)$ #999999 #666666
#9999cc $(153, 153, 204)$ $(240, 63, 204)$ #cccc99 #666633
#9999ff $(153, 153, 255)$ $(240, 102, 255)$ #ffff99 #666600
#99cc00 $(153, 204, 0)$ $(75, 255, 204)$ #3300cc #6633ff
#99cc33 $(153, 204, 51)$ $(80, 191, 204)$ #6633cc #6633cc
#99cc66 $(153, 204, 102)$ $(90, 127, 204)$ #9966cc #663399
#99cc99 $(153, 204, 153)$ $(120, 63, 204)$ #cc99cc #663366
#99cccc $(153, 204, 204)$ $(180, 63, 204)$ #cc9999 #663333
#99ccff $(153, 204, 255)$ $(210, 102, 255)$ #ffcc99 #663300
#99ff00 $(153, 255, 0)$ $(84, 255, 255)$ #6600ff #6600ff
#99ff33 $(153, 255, 51)$ $(90, 204, 255)$ #9933ff #6600cc
#99ff66 $(153, 255, 102)$ $(100, 153, 255)$ #cc66ff #660099
#99ff99 $(153, 255, 153)$ $(120, 102, 255)$ #ff99ff #660066
#99ffcc $(153, 255, 204)$ $(150, 102, 255)$ #ff99cc #660033
#99ffff $(153, 255, 255)$ $(180, 102, 255)$ #ff9999 #660000
#cc0000 $(204, 0, 0)$ $(0, 255, 204)$ #00cccc #33ffff
#cc0033 $(204, 0, 51)$ $(345, 255, 204)$ #00cc99 #33ffcc
#cc0066 $(204, 0, 102)$ $(330, 255, 204)$ #00cc66 #33ff99
#cc0099 $(204, 0, 153)$ $(315, 255, 204)$ #00cc33 #33ff66
#cc00cc $(204, 0, 204)$ $(300, 255, 204)$ #00cc00 #33ff33
#cc00ff $(204, 0, 255)$ $(288, 255, 255)$ #33ff00 #33ff00
#cc3300 $(204, 51, 0)$ $(14, 255, 204)$ #0099cc #33ccff
#cc3333 $(204, 51, 51)$ $(0, 191, 204)$ #33cccc #33cccc
#cc3366 $(204, 51, 102)$ $(340, 191, 204)$ #33cc99 #33cc99
#cc3399 $(204, 51, 153)$ $(320, 191, 204)$ #33cc66 #33cc66
#cc33cc $(204, 51, 204)$ $(300, 191, 204)$ #33cc33 #33cc33
#cc33ff $(204, 51, 255)$ $(285, 204, 255)$ #66ff33 #33cc00
#cc6600 $(204, 102, 0)$ $(30, 255, 204)$ #0066cc #3399ff
#cc6633 $(204, 102, 51)$ $(20, 191, 204)$ #3399cc #3399cc
#cc6666 $(204, 102, 102)$ $(0, 127, 204)$ #66cccc #339999
#cc6699 $(204, 102, 153)$ $(330, 127, 204)$ #66cc99 #339966
#cc66cc $(204, 102, 204)$ $(300, 127, 204)$ #66cc66 #339933
#cc66ff $(204, 102, 255)$ $(280, 153, 255)$ #99ff66 #339900
#cc9900 $(204, 153, 0)$ $(45, 255, 204)$ #0033cc #3366ff
#cc9933 $(204, 153, 51)$ $(40, 191, 204)$ #3366cc #3366cc
#cc9966 $(204, 153, 102)$ $(29, 127, 204)$ #6699cc #336699
#cc9999 $(204, 153, 153)$ $(0, 63, 204)$ #99cccc #336666
#cc99cc $(204, 153, 204)$ $(300, 63, 204)$ #99cc99 #336633
#cc99ff $(204, 153, 255)$ $(270, 102, 255)$ #ccff99 #336600
#cccc00 $(204, 204, 0)$ $(60, 255, 204)$ #0000cc #3333ff
#cccc33 $(204, 204, 51)$ $(60, 191, 204)$ #3333cc #3333cc
#cccc66 $(204, 204, 102)$ $(60, 127, 204)$ #6666cc #333399
#cccc99 $(204, 204, 153)$ $(60, 63, 204)$ #9999cc #333366
#cccccc $(204, 204, 204)$ $(0, 0, 204)$ #cccccc #333333
#ccccff $(204, 204, 255)$ $(240, 50, 255)$ #ffffcc #333300
#ccff00 $(204, 255, 0)$ $(72, 255, 255)$ #3300ff #3300ff
#ccff33 $(204, 255, 51)$ $(75, 204, 255)$ #6633ff #3300cc
#ccff66 $(204, 255, 102)$ $(80, 153, 255)$ #9966ff #330099
#ccff99 $(204, 255, 153)$ $(89, 102, 255)$ #cc99ff #330066
#ccffcc $(204, 255, 204)$ $(120, 50, 255)$ #ffccff #330033
#ccffff $(204, 255, 255)$ $(180, 50, 255)$ #ffcccc #330000
#ff0000 $(255, 0, 0)$ $(0, 255, 255)$ #00ffff #00ffff
#ff0033 $(255, 0, 51)$ $(348, 255, 255)$ #00ffcc #00ffcc
#ff0066 $(255, 0, 102)$ $(336, 255, 255)$ #00ff99 #00ff99
#ff0099 $(255, 0, 153)$ $(324, 255, 255)$ #00ff66 #00ff66
#ff00cc $(255, 0, 204)$ $(312, 255, 255)$ #00ff33 #00ff33
#ff00ff $(255, 0, 255)$ $(300, 255, 255)$ #00ff00 #00ff00
#ff3300 $(255, 51, 0)$ $(12, 255, 255)$ #00ccff #00ccff
#ff3333 $(255, 51, 51)$ $(0, 204, 255)$ #33ffff #00cccc
#ff3366 $(255, 51, 102)$ $(345, 204, 255)$ #33ffcc #00cc99
#ff3399 $(255, 51, 153)$ $(330, 204, 255)$ #33ff99 #00cc66
#ff33cc $(255, 51, 204)$ $(315, 204, 255)$ #33ff66 #00cc33
#ff33ff $(255, 51, 255)$ $(300, 204, 255)$ #33ff33 #00cc00
#ff6600 $(255, 102, 0)$ $(24, 255, 255)$ #0099ff #0099ff
#ff6633 $(255, 102, 51)$ $(15, 204, 255)$ #33ccff #0099cc
#ff6666 $(255, 102, 102)$ $(0, 153, 255)$ #66ffff #009999
#ff6699 $(255, 102, 153)$ $(340, 153, 255)$ #66ffcc #009966
#ff66cc $(255, 102, 204)$ $(320, 153, 255)$ #66ff99 #009933
#ff66ff $(255, 102, 255)$ $(300, 153, 255)$ #66ff66 #009900
#ff9900 $(255, 153, 0)$ $(36, 255, 255)$ #0066ff #0066ff
#ff9933 $(255, 153, 51)$ $(30, 204, 255)$ #3399ff #0066cc
#ff9966 $(255, 153, 102)$ $(20, 153, 255)$ #66ccff #006699
#ff9999 $(255, 153, 153)$ $(0, 102, 255)$ #99ffff #006666
#ff99cc $(255, 153, 204)$ $(330, 102, 255)$ #99ffcc #006633
#ff99ff $(255, 153, 255)$ $(300, 102, 255)$ #99ff99 #006600
#ffcc00 $(255, 204, 0)$ $(48, 255, 255)$ #0033ff #0033ff
#ffcc33 $(255, 204, 51)$ $(45, 204, 255)$ #3366ff #0033cc
#ffcc66 $(255, 204, 102)$ $(40, 153, 255)$ #6699ff #003399
#ffcc99 $(255, 204, 153)$ $(30, 102, 255)$ #99ccff #003366
#ffcccc $(255, 204, 204)$ $(0, 50, 255)$ #ccffff #003333
#ffccff $(255, 204, 255)$ $(300, 50, 255)$ #ccffcc #003300
#ffff00 $(255, 255, 0)$ $(60, 255, 255)$ #0000ff #0000ff
#ffff33 $(255, 255, 51)$ $(60, 204, 255)$ #3333ff #0000cc
#ffff66 $(255, 255, 102)$ $(60, 153, 255)$ #6666ff #000099
#ffff99 $(255, 255, 153)$ $(60, 102, 255)$ #9999ff #000066
#ffffcc $(255, 255, 204)$ $(60, 50, 255)$ #ccccff #000033
#ffffff $(255, 255, 255)$ $(0, 0, 255)$ #ffffff #000000

Pythonコード

上記の表を作成したコードは以下です。
言語はPython、環境はGoogle Colaboratoryを使用しました。

print('| カラーコード | $(R, G, B)$ | $(H, S, V)$ | 補色 | 反対色 |')
print('| :---: | :--- | :--- | :---: | :---: |')
for r in range(0, 256, 51):
  for g in range(0, 256, 51):
    for b in range(0, 256, 51):
      r_c, g_c, b_c = get_complementary_colors(r, g, b)
      r_o, g_o, b_o = get_opposite_colors(r, g, b)
      h, s, v = get_hsv_colors(r, g, b)
      color_code = '`#' + format(r, '02x') + format(g, '02x') + format(b, '02x') + '`' # 16進数に変換
      rgb = '$({}, {}, {})$'.format(r, g, b)
      hsv = '$({}, {}, {})$'.format(h, s, v)
      color_code_comp = '`#' + format(r_c, '02x') + format(g_c, '02x') + format(b_c, '02x') + '`'
      color_code_opposit = '`#' + format(r_o, '02x') + format(g_o, '02x') + format(b_o, '02x') + '`'
      print('| {} | {} | {} | {} | {} |'.format(color_code, rgb, hsv, color_code_comp, color_code_opposit))

関数は以下です。

def get_complementary_colors(r, g, b):
  """補色を計算する関数"""
  tmp = max(r, g, b) + min(r, g, b)
  return tmp - r, tmp - g, tmp - b

def get_opposite_colors(r, g, b):
  """反対色を計算する関数"""
  return 255 - r, 255 - g, 255 - b

def get_hsv_colors(r, g, b):
  """
  HSVを計算する関数
  円柱モデルを使用
  h, s, vの取りうる値の範囲は
  h : 0 - 360
  s : 0 - 255
  v : 0 - 255
  とした
  """
  r /= 255
  g /= 255
  b /= 255
  max_rgb = max(r, g, b)
  min_rgb = min(r, g, b)
  v = max_rgb
  if v == 0 or v == min_rgb:
    h = 0
    s = 0
  else:
    s = (max_rgb - min_rgb) / max_rgb
    if min_rgb == b:
      h = 60 * (g - r)/(max_rgb - min_rgb) + 60
    elif min_rgb == r:
      h = 60 * (b - g)/(max_rgb - min_rgb) + 180
    elif min_rgb == g:
      h = 60 * (r - b)/(max_rgb - min_rgb) + 300
  h %= 360
  s *= 255
  v *= 255
  return int(h), int(s), int(v)

なお、HSVについてはOpenCVを使用した以下の計算でも同様の結果が得られます。

import cv2
import numpy as np

def get_hsv_colors_cv2(r, g, b):
  """HSVを計算する関数(OpenCVを使用)"""
  bgr = np.uint8([[[b, g, r ]]])
  hsv = cv2.cvtColor(bgr, cv2.COLOR_BGR2HSV)
  h = hsv[0][0][0]
  s = hsv[0][0][1]
  v = hsv[0][0][2]
  h *= 2 # openCVでは0-180のため
  return h, s, v

Webセーフカラー

Webセーフカラーとは、ブラウザやOSといった環境が異なっても同じように表示されるカラーのことです。
RGBをそれぞれ6段階(16進数表記の場合、00、33、66、99、CC、FF)に分け、それらの組み合わせでできる色です。
全部で216色あります。

RGB

RGBとは、赤(Red) 、緑(Green) 、青(Blue) の三色を組み合わせて色を表現する方法です。

一般的な色の表現方法となります。

HSV

HSVは、色相(Hue)、彩度(Saturation)、明度(Value)の3つを組み合わせて色を表現する方法です。

RGBは、原色の組み合わせで色を表現している一方、HSVは色を「鮮やかさ」「明るさ」で表現しています。
色を固定して鮮やかさや明るさを調整できるので、RGBに比べて色の調整がしやすいというメリットがあります。

RGBからHSVへの変換

RGBとHSV

図の引用元: HSV color model

RGB空間からHSV空間への変換式は以下になります。
MAX, MINはそれぞれRGBのうちの最大値、最小値です。

\begin{eqnarray}
H &=&
\begin{cases}
{\rm undefined},       &({\rm when ~~~} {\rm MIN} = {\rm MAX})\\
60 \times \displaystyle\frac{G - R}{{\rm MAX}-{\rm MIN}}+60, &({\rm when ~~~}{\rm MIN} = B)\\
60 \times \displaystyle\frac{B - G}{{\rm MAX}-{\rm MIN}}+180, &({\rm when ~~~}{\rm MIN} = R)\\
60 \times \displaystyle\frac{R - B}{{\rm MAX}-{\rm MIN}}+300, &({\rm when ~~~}{\rm MIN} = G)
\end{cases}\\
\\
S &=& \frac{{\rm MAX}-{\rm MIN}}{{\rm MAX}}\\
\\
V &=& {\rm MAX}
\end{eqnarray}

ただし、$0 \le R, G, B \le 1$の必要があるため、あらかじめ$R, G, B$はそれぞれ$255$で割っています。

また、$0 \le H \le 360$のため、最終的に$360$で割った余りを$H$に割り当てる必要があります。

# 例
H = 400 # > 360
print(H % 360)
#40
H = -30 # < 0
print(H % 360)
#330

補色と反対色

補色と反対色
図の引用元: Wikipedia

色相環(上記の図)で正反対の位置にある色を補色、正反対の色の隣近辺の色を反対色と言います。
補色同士を混ぜ合わせると、無彩色と呼ばれる、白と黒のみの混合でつくられる色となります。

補色の計算

補色は、RGB値の最大値と最小値を足した値から、RGBそれぞれの値を引いたものになります。

例)
$RGB = (100, 255, 50)$
の場合、
最大値255と最小値50を足した値305から、それぞれ値を引いた
$305 - 100 = 205$
$305 - 255 = 50$
$305 - 50 = 255$
が補色
$RGB = (205, 50, 255)$
になります。

反対色の計算

反対色は、255からRGBそれぞれの値を引いたものになります。

例)
$RGB = (100, 255, 50)$
の場合、
255からそれぞれ値を引いた
$255 - 100 = 155$
$255 - 255 = 0$
$255 - 50 = 205$
が反対色
$RGB = (155, 0, 205)$
になります。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
95