十六进制颜色代码究竟是如何工作的？ / 如何实现像热图这样的东西

Question

我正在开发一个简单的程序，使用 Python turtle 包围绕一些固定点绘制圆圈；但是，我想让它有点像热图，当颜色远离原始点时，颜色会变得“更冷”。我的想法是采用基础白色#FFFFFF，然后根据距离减去一个百分比。

我假设十六进制颜色代码的工作原理是随着颜色变得“更冷”而降低其十六进制值，但我现在已经读到前两个表示它的红色值，第二个表示绿色，最后一个表示蓝色。我将如何按照我希望的方式实施热图？

我确信距离是正确的，我只是认为我以错误的方式使用颜色代码。我编写的用于计算颜色的函数：

def findColor(dist):
    base = "FFFFFF"
    num = int(base, 16)
    percent = dist/800 #800 is the max distance away
    newNum = (num - (num*percent))
    color = hex(int(newNum))
    return color

我得到的结果地图是：

在 Ignacio Vazquez-Abrams 对 HSV 的帮助下，我得到了它的样子 :)：

Answer 1

您想使用HSV 而不是RGB 作为颜色；根据您的距离滑过色调维度。 colorsys 可以帮忙。

Answer 2

诀窍是单独处理三个字节。我将尝试按照我认为应该工作的方式重写您的函数：

def findColor(dist):
    base = 0xFFFFFF
    percent = dist/800 #800 is the max distance away
    hexpercent = 0xFF - (percent * 0xFF)
    first = (base & 0xFF0000) >> 16
    second = (base & 0xFF00) >> 8
    third = base & 0xFF
    color = hex(((first - hexpercent) << 16) | ((second - hexpercent) << 8) | (third - hexpercent))
    return color

我隔离每个字节，从每个字节中减去百分比，然后将字节重新组合成一个整数。可能有更聪明的方法来做到这一点，但它应该给你一个稳定的灰色渐变。 （如果您想要稳定的红色、绿色或蓝色渐变，请使用 0xFF0000 或 0xFF00 或 0xFF。）

请注意，这并没有考虑任何physiological properties of color —— 可能有更多令人愉悦 的方法来解决这个问题。 （实际的色彩专家对web-safe colors 感到非常不满，因为所涉及的数字 被计算机科学家选中...）

Answer 3

这里的代码将插入任何多色渐变。它设置为白色 > 红色 > 绿色 > 蓝色 > 黑色，但很容易将其更改为任何其他渐变。

“d”参数的范围是 0 到 1，因此如果您有较大的距离，您可能希望将其按比例缩小以便在此函数中使用。

代码采用 RGB 中的颜色，但将它们转换为 HSV 以获得更好的插值。

import colorsys
import math

GRADIENT_SPEC = [
    (1.0, 1.0, 1.0),  # white
    (1.0, 0.0, 0.0),  # red
    (0.0, 1.0, 0.0),  # green
    (0.0, 0.0, 1.0),  # blue
    (0.0, 0.0, 0.0)]  # black

def gradient(d, spec=GRADIENT_SPEC):
    N = len(spec)
    idx = int(d * (N - 1))
    t = math.fmod(d * (N - 1), 1.0)
    col1 = colorsys.rgb_to_hsv(*spec[min(N - 1, idx)])
    col2 = colorsys.rgb_to_hsv(*spec[min(N - 1, idx + 1)])
    hsv = tuple(a * (1 - t) + b * t for a, b in zip(col1, col2))
    r, g, b = colorsys.hsv_to_rgb(*hsv)
    return '#%02X%02X%02X' % (r * 255, g * 255, b * 255)

for x in xrange(12):
    print x, gradient(x / 10.0)