Color code list

Color code list

Since I studied about colors, I made a list of color codes.

--Note) The following is a list of color codes for Web Safe Colors (explained below). --Note) The range of possible values for HSV is $ 0 \ le H \ le 360, ~~ 0 \ le S, V \ le 255 $.

Color code (R, G, B) (H, S, V) Complementary colors Opposite color
#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 code

The above list is a copy and paste of the output result of the following Python code. The environment used was Google Colaboratory.

print('|Color code| $(R, G, B)$ | $(H, S, V)$ |Complementary colors|Opposite color|')
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') + '`' #Convert to hexadecimal
      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))

The function is:

def get_complementary_colors(r, g, b):
  """Function to calculate complementary colors"""
  tmp = max(r, g, b) + min(r, g, b)
  return tmp - r, tmp - g, tmp - b

def get_opposite_colors(r, g, b):
  """Function to calculate the opposite color"""
  return 255 - r, 255 - g, 255 - b

def get_hsv_colors(r, g, b):
  """
Function to calculate HSV
Use a cylinder model
  h, s,The range of possible values for v is
  h : 0 - 360
  s : 0 - 255
  v : 0 - 255
And
  """
  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)

For HSV, the same result can be obtained by the following calculation using OpenCV.

import cv2
import numpy as np

def get_hsv_colors_cv2(r, g, b):
  """Function to calculate HSV (using 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 #0 in openCV-For 180
  return h, s, v

Web safe color

Web-safe colors are colors that are displayed in the same way even in different environments such as browsers and operating systems. RGB is divided into 6 levels (00, 33, 66, 99, CC, FF in hexadecimal notation), and the colors can be combined. There are 216 colors in all.

RGB RGB is a method of expressing colors by combining the three colors of red (** R ** ed), green (** G ** reen), and blue (** B ** lue). It is a general color expression method.

HSV HSV is a method of expressing color by combining three of hue (** H ** ue), saturation (** S ** saturation), and lightness (** V ** alue).

RGB to HSV conversion

image.png Source: HSV color model

The conversion formula from RGB space to HSV space is as follows. MAX and MIN are the maximum and minimum values of RGB, respectively.

\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}

However, since $ 0 \ le R, G, B \ le 1 $ is required, $ R, G, B $ are divided by $ 255 $ in advance.

Also, since it is $ 0 \ le H \ le 360 $, we need to finally allocate the remainder divided by $ 360 $ to $ H $.

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

Complementary colors

Complementary colors are the sum of the maximum and minimum RGB values minus the respective RGB values.

Example) RGB = (100, 255, 50) in the case of, The value is subtracted from the value 305, which is the sum of the maximum value 255 and the minimum value 50. 305 - 100 = 205 305 - 255 = 50 305 - 50 = 255 Is a complementary color RGB = (205, 50, 255) Will be.

Opposite color

The opposite color is 255 minus the RGB values.

Example) RGB = (100, 255, 50) in the case of, Each value was subtracted from 255 255 - 100 = 155 255 - 255 = 0 255 - 50 = 205 Is the opposite color RGB = (155, 0, 205) Will be.

reference

-HSV Color Space -Color wheel and 12 color wheel [Creation and calculation formula]

Recommended Posts

Color code list
palettable color map list
matplotlib Color list creation
List comprehension
linked list
Join list
Character code
List comprehension
Bad code
[Python] list
Get the EDINET code list in Python
Let Code Day 62 "83. Remove Duplicates from Sorted List"
List of Python code to move and remember