Depuis que j'ai étudié les couleurs, j'ai fait une liste de codes couleurs.
--Remarque) Ce qui suit est une liste de codes de couleur pour Web Safe Color (expliqué ci-dessous). --Note) La plage de valeurs possibles pour HSV est $ 0 \ le H \ le 360, ~~ 0 \ le S, V \ le 255 $.
Code couleur | Couleur complémentaire | Couleur opposée | ||
---|---|---|---|---|
#000000 |
#000000 |
#ffffff |
||
#000033 |
#333300 |
#ffffcc |
||
#000066 |
#666600 |
#ffff99 |
||
#000099 |
#999900 |
#ffff66 |
||
#0000cc |
#cccc00 |
#ffff33 |
||
#0000ff |
#ffff00 |
#ffff00 |
||
#003300 |
#330033 |
#ffccff |
||
#003333 |
#330000 |
#ffcccc |
||
#003366 |
#663300 |
#ffcc99 |
||
#003399 |
#996600 |
#ffcc66 |
||
#0033cc |
#cc9900 |
#ffcc33 |
||
#0033ff |
#ffcc00 |
#ffcc00 |
||
#006600 |
#660066 |
#ff99ff |
||
#006633 |
#660033 |
#ff99cc |
||
#006666 |
#660000 |
#ff9999 |
||
#006699 |
#993300 |
#ff9966 |
||
#0066cc |
#cc6600 |
#ff9933 |
||
#0066ff |
#ff9900 |
#ff9900 |
||
#009900 |
#990099 |
#ff66ff |
||
#009933 |
#990066 |
#ff66cc |
||
#009966 |
#990033 |
#ff6699 |
||
#009999 |
#990000 |
#ff6666 |
||
#0099cc |
#cc3300 |
#ff6633 |
||
#0099ff |
#ff6600 |
#ff6600 |
||
#00cc00 |
#cc00cc |
#ff33ff |
||
#00cc33 |
#cc0099 |
#ff33cc |
||
#00cc66 |
#cc0066 |
#ff3399 |
||
#00cc99 |
#cc0033 |
#ff3366 |
||
#00cccc |
#cc0000 |
#ff3333 |
||
#00ccff |
#ff3300 |
#ff3300 |
||
#00ff00 |
#ff00ff |
#ff00ff |
||
#00ff33 |
#ff00cc |
#ff00cc |
||
#00ff66 |
#ff0099 |
#ff0099 |
||
#00ff99 |
#ff0066 |
#ff0066 |
||
#00ffcc |
#ff0033 |
#ff0033 |
||
#00ffff |
#ff0000 |
#ff0000 |
||
#330000 |
#003333 |
#ccffff |
||
#330033 |
#003300 |
#ccffcc |
||
#330066 |
#336600 |
#ccff99 |
||
#330099 |
#669900 |
#ccff66 |
||
#3300cc |
#99cc00 |
#ccff33 |
||
#3300ff |
#ccff00 |
#ccff00 |
||
#333300 |
#000033 |
#ccccff |
||
#333333 |
#333333 |
#cccccc |
||
#333366 |
#666633 |
#cccc99 |
||
#333399 |
#999933 |
#cccc66 |
||
#3333cc |
#cccc33 |
#cccc33 |
||
#3333ff |
#ffff33 |
#cccc00 |
||
#336600 |
#330066 |
#cc99ff |
||
#336633 |
#663366 |
#cc99cc |
||
#336666 |
#663333 |
#cc9999 |
||
#336699 |
#996633 |
#cc9966 |
||
#3366cc |
#cc9933 |
#cc9933 |
||
#3366ff |
#ffcc33 |
#cc9900 |
||
#339900 |
#660099 |
#cc66ff |
||
#339933 |
#993399 |
#cc66cc |
||
#339966 |
#993366 |
#cc6699 |
||
#339999 |
#993333 |
#cc6666 |
||
#3399cc |
#cc6633 |
#cc6633 |
||
#3399ff |
#ff9933 |
#cc6600 |
||
#33cc00 |
#9900cc |
#cc33ff |
||
#33cc33 |
#cc33cc |
#cc33cc |
||
#33cc66 |
#cc3399 |
#cc3399 |
||
#33cc99 |
#cc3366 |
#cc3366 |
||
#33cccc |
#cc3333 |
#cc3333 |
||
#33ccff |
#ff6633 |
#cc3300 |
||
#33ff00 |
#cc00ff |
#cc00ff |
||
#33ff33 |
#ff33ff |
#cc00cc |
||
#33ff66 |
#ff33cc |
#cc0099 |
||
#33ff99 |
#ff3399 |
#cc0066 |
||
#33ffcc |
#ff3366 |
#cc0033 |
||
#33ffff |
#ff3333 |
#cc0000 |
||
#660000 |
#006666 |
#99ffff |
||
#660033 |
#006633 |
#99ffcc |
||
#660066 |
#006600 |
#99ff99 |
||
#660099 |
#339900 |
#99ff66 |
||
#6600cc |
#66cc00 |
#99ff33 |
||
#6600ff |
#99ff00 |
#99ff00 |
||
#663300 |
#003366 |
#99ccff |
||
#663333 |
#336666 |
#99cccc |
||
#663366 |
#336633 |
#99cc99 |
||
#663399 |
#669933 |
#99cc66 |
||
#6633cc |
#99cc33 |
#99cc33 |
||
#6633ff |
#ccff33 |
#99cc00 |
||
#666600 |
#000066 |
#9999ff |
||
#666633 |
#333366 |
#9999cc |
||
#666666 |
#666666 |
#999999 |
||
#666699 |
#999966 |
#999966 |
||
#6666cc |
#cccc66 |
#999933 |
||
#6666ff |
#ffff66 |
#999900 |
||
#669900 |
#330099 |
#9966ff |
||
#669933 |
#663399 |
#9966cc |
||
#669966 |
#996699 |
#996699 |
||
#669999 |
#996666 |
#996666 |
||
#6699cc |
#cc9966 |
#996633 |
||
#6699ff |
#ffcc66 |
#996600 |
||
#66cc00 |
#6600cc |
#9933ff |
||
#66cc33 |
#9933cc |
#9933cc |
||
#66cc66 |
#cc66cc |
#993399 |
||
#66cc99 |
#cc6699 |
#993366 |
||
#66cccc |
#cc6666 |
#993333 |
||
#66ccff |
#ff9966 |
#993300 |
||
#66ff00 |
#9900ff |
#9900ff |
||
#66ff33 |
#cc33ff |
#9900cc |
||
#66ff66 |
#ff66ff |
#990099 |
||
#66ff99 |
#ff66cc |
#990066 |
||
#66ffcc |
#ff6699 |
#990033 |
||
#66ffff |
#ff6666 |
#990000 |
||
#990000 |
#009999 |
#66ffff |
||
#990033 |
#009966 |
#66ffcc |
||
#990066 |
#009933 |
#66ff99 |
||
#990099 |
#009900 |
#66ff66 |
||
#9900cc |
#33cc00 |
#66ff33 |
||
#9900ff |
#66ff00 |
#66ff00 |
||
#993300 |
#006699 |
#66ccff |
||
#993333 |
#339999 |
#66cccc |
||
#993366 |
#339966 |
#66cc99 |
||
#993399 |
#339933 |
#66cc66 |
||
#9933cc |
#66cc33 |
#66cc33 |
||
#9933ff |
#99ff33 |
#66cc00 |
||
#996600 |
#003399 |
#6699ff |
||
#996633 |
#336699 |
#6699cc |
||
#996666 |
#669999 |
#669999 |
||
#996699 |
#669966 |
#669966 |
||
#9966cc |
#99cc66 |
#669933 |
||
#9966ff |
#ccff66 |
#669900 |
||
#999900 |
#000099 |
#6666ff |
||
#999933 |
#333399 |
#6666cc |
||
#999966 |
#666699 |
#666699 |
||
#999999 |
#999999 |
#666666 |
||
#9999cc |
#cccc99 |
#666633 |
||
#9999ff |
#ffff99 |
#666600 |
||
#99cc00 |
#3300cc |
#6633ff |
||
#99cc33 |
#6633cc |
#6633cc |
||
#99cc66 |
#9966cc |
#663399 |
||
#99cc99 |
#cc99cc |
#663366 |
||
#99cccc |
#cc9999 |
#663333 |
||
#99ccff |
#ffcc99 |
#663300 |
||
#99ff00 |
#6600ff |
#6600ff |
||
#99ff33 |
#9933ff |
#6600cc |
||
#99ff66 |
#cc66ff |
#660099 |
||
#99ff99 |
#ff99ff |
#660066 |
||
#99ffcc |
#ff99cc |
#660033 |
||
#99ffff |
#ff9999 |
#660000 |
||
#cc0000 |
#00cccc |
#33ffff |
||
#cc0033 |
#00cc99 |
#33ffcc |
||
#cc0066 |
#00cc66 |
#33ff99 |
||
#cc0099 |
#00cc33 |
#33ff66 |
||
#cc00cc |
#00cc00 |
#33ff33 |
||
#cc00ff |
#33ff00 |
#33ff00 |
||
#cc3300 |
#0099cc |
#33ccff |
||
#cc3333 |
#33cccc |
#33cccc |
||
#cc3366 |
#33cc99 |
#33cc99 |
||
#cc3399 |
#33cc66 |
#33cc66 |
||
#cc33cc |
#33cc33 |
#33cc33 |
||
#cc33ff |
#66ff33 |
#33cc00 |
||
#cc6600 |
#0066cc |
#3399ff |
||
#cc6633 |
#3399cc |
#3399cc |
||
#cc6666 |
#66cccc |
#339999 |
||
#cc6699 |
#66cc99 |
#339966 |
||
#cc66cc |
#66cc66 |
#339933 |
||
#cc66ff |
#99ff66 |
#339900 |
||
#cc9900 |
#0033cc |
#3366ff |
||
#cc9933 |
#3366cc |
#3366cc |
||
#cc9966 |
#6699cc |
#336699 |
||
#cc9999 |
#99cccc |
#336666 |
||
#cc99cc |
#99cc99 |
#336633 |
||
#cc99ff |
#ccff99 |
#336600 |
||
#cccc00 |
#0000cc |
#3333ff |
||
#cccc33 |
#3333cc |
#3333cc |
||
#cccc66 |
#6666cc |
#333399 |
||
#cccc99 |
#9999cc |
#333366 |
||
#cccccc |
#cccccc |
#333333 |
||
#ccccff |
#ffffcc |
#333300 |
||
#ccff00 |
#3300ff |
#3300ff |
||
#ccff33 |
#6633ff |
#3300cc |
||
#ccff66 |
#9966ff |
#330099 |
||
#ccff99 |
#cc99ff |
#330066 |
||
#ccffcc |
#ffccff |
#330033 |
||
#ccffff |
#ffcccc |
#330000 |
||
#ff0000 |
#00ffff |
#00ffff |
||
#ff0033 |
#00ffcc |
#00ffcc |
||
#ff0066 |
#00ff99 |
#00ff99 |
||
#ff0099 |
#00ff66 |
#00ff66 |
||
#ff00cc |
#00ff33 |
#00ff33 |
||
#ff00ff |
#00ff00 |
#00ff00 |
||
#ff3300 |
#00ccff |
#00ccff |
||
#ff3333 |
#33ffff |
#00cccc |
||
#ff3366 |
#33ffcc |
#00cc99 |
||
#ff3399 |
#33ff99 |
#00cc66 |
||
#ff33cc |
#33ff66 |
#00cc33 |
||
#ff33ff |
#33ff33 |
#00cc00 |
||
#ff6600 |
#0099ff |
#0099ff |
||
#ff6633 |
#33ccff |
#0099cc |
||
#ff6666 |
#66ffff |
#009999 |
||
#ff6699 |
#66ffcc |
#009966 |
||
#ff66cc |
#66ff99 |
#009933 |
||
#ff66ff |
#66ff66 |
#009900 |
||
#ff9900 |
#0066ff |
#0066ff |
||
#ff9933 |
#3399ff |
#0066cc |
||
#ff9966 |
#66ccff |
#006699 |
||
#ff9999 |
#99ffff |
#006666 |
||
#ff99cc |
#99ffcc |
#006633 |
||
#ff99ff |
#99ff99 |
#006600 |
||
#ffcc00 |
#0033ff |
#0033ff |
||
#ffcc33 |
#3366ff |
#0033cc |
||
#ffcc66 |
#6699ff |
#003399 |
||
#ffcc99 |
#99ccff |
#003366 |
||
#ffcccc |
#ccffff |
#003333 |
||
#ffccff |
#ccffcc |
#003300 |
||
#ffff00 |
#0000ff |
#0000ff |
||
#ffff33 |
#3333ff |
#0000cc |
||
#ffff66 |
#6666ff |
#000099 |
||
#ffff99 |
#9999ff |
#000066 |
||
#ffffcc |
#ccccff |
#000033 |
||
#ffffff |
#ffffff |
#000000 |
La liste ci-dessus est une copie du résultat de sortie du code Python suivant. L'environnement utilisé était Google Colaboratory.
print('|Code couleur| $(R, G, B)$ | $(H, S, V)$ |Couleur complémentaire|Couleur opposée|')
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') + '`' #Convertir en hexadécimal
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))
La fonction est:
def get_complementary_colors(r, g, b):
"""Fonction pour calculer les couleurs complémentaires"""
tmp = max(r, g, b) + min(r, g, b)
return tmp - r, tmp - g, tmp - b
def get_opposite_colors(r, g, b):
"""Fonction pour calculer la couleur opposée"""
return 255 - r, 255 - g, 255 - b
def get_hsv_colors(r, g, b):
"""
Fonction pour calculer HSV
Utilisez un modèle en colonnes
h, s,La plage de valeurs possibles pour v est
h : 0 - 360
s : 0 - 255
v : 0 - 255
Et
"""
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)
Pour HSV, le même résultat peut être obtenu par le calcul suivant en utilisant OpenCV.
import cv2
import numpy as np
def get_hsv_colors_cv2(r, g, b):
"""Fonction pour calculer HSV (en utilisant 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 dans openCV-Pour 180
return h, s, v
Les couleurs Web sécurisées sont des couleurs qui s'affichent de la même manière, même dans différents environnements tels que les navigateurs et les systèmes d'exploitation. RVB est divisé en 6 niveaux (00, 33, 66, 99, CC, FF en notation hexadécimale) et les couleurs peuvent être combinées. Il y a 216 couleurs en tout.
RGB RVB est une méthode d'expression des couleurs en combinant les trois couleurs rouge (** R ** ed), vert (** G ** reen) et bleu (** B ** lue). C'est une méthode générale d'expression des couleurs.
HSV HSV est une méthode d'expression de la couleur en combinant la teinte (** H ** ue), la saturation (** S ** saturation) et la luminosité (** V ** a lue).
La formule de conversion de l'espace RVB en espace HSV est la suivante. MAX et MIN sont respectivement les valeurs maximale et minimale de RVB.
\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}
Cependant, $ 0 \ le R, G, B \ le 1 $ est requis, donc $ R, G, B $ sont divisés par 255 $ à l'avance.
De plus, puisqu'il s'agit de $ 0 \ le H \ le 360 $, il faut enfin allouer le reste divisé par 360 $ à $ H $.
#Exemple
H = 400 # > 360
print(H % 360)
#40
H = -30 # < 0
print(H % 360)
#330
La couleur complémentaire est la somme des valeurs RVB maximale et minimale moins les valeurs RVB respectives.
Exemple)
La couleur opposée est 255 moins les valeurs RVB.
Exemple)
Recommended Posts