當(dāng)我第一次開始構(gòu)建 Colorify Rocks（我的調(diào)色板網(wǎng)站）時(shí)，我不知道程序化顏色操作的兔子洞有多深。最初是一個(gè)簡(jiǎn)單的“讓我構(gòu)建一個(gè)顏色選擇器”項(xiàng)目，后來變成了一次通過顏色理論、數(shù)學(xué)顏色空間和可訪問性考慮的迷人旅程。今天，我想分享我在構(gòu)建此工具時(shí)學(xué)到的知識(shí)，以及一些可能對(duì)您自己的色彩冒險(xiǎn)有所幫助的 Python 代碼。

只是顏色而已，能有多難呢？

哦，過了我。那時(shí)的你多么天真??！我的旅程始于一個(gè)簡(jiǎn)單的目標(biāo)：建立一個(gè)網(wǎng)站，人們可以在其中生成和保存調(diào)色板。容易，對(duì)吧？只需獲取一個(gè)十六進(jìn)制代碼，然后...等等，什么是 HSL？為什么我們需要 RGB？那么 CMYK 到底是什么？

想看看我在說什么嗎？查看我們對(duì) #3B49DF 的顏色分析

這是我編寫的第一段用于處理顏色轉(zhuǎn)換的代碼，現(xiàn)在它的簡(jiǎn)單性讓我咯咯笑：

class Color:
    def __init__(self, hex_code):
        self.hex = hex_code.lstrip('#')
        # Past me: "This is probably all I need!"
    def to_rgb(self):
        # My first "aha!" moment with color spaces
        r = int(self.hex[0:2], 16)
        g = int(self.hex[2:4], 16)
        b = int(self.hex[4:6], 16)
        return f"rgb({r},{g},)"

一切都是數(shù)學(xué)

然后我意識(shí)到顏色基本上只是偽裝的數(shù)學(xué)。在色彩空間之間進(jìn)行轉(zhuǎn)換意味著深入研究我從高中以來就沒有接觸過的算法。以下是代碼演變成的內(nèi)容

def _rgb_to_hsl(self):
    # This was my "mind-blown" moment
    r, g, b = [x/255 for x in (self.rgb['r'], self.rgb['g'], self.rgb['b'])]
    cmax, cmin = max(r, g, b), min(r, g, b)
    delta = cmax - cmin
    # The math that made me question everything I knew about colors
    h = 0
    if delta != 0:
        if cmax == r:
            h = 60 * (((g - b) / delta) % 6)
        elif cmax == g:
            h = 60 * ((b - r) / delta + 2)
        else:
            h = 60 * ((r - g) / delta + 4)
    l = (cmax + cmin) / 2
    s = 0 if delta == 0 else delta / (1 - abs(2 * l - 1))
    return {
        'h': round(h),
        's': round(s * 100),
        'l': round(l * 100)
    }

顏色之間有關(guān)系

我為 Colorify Rocks 構(gòu)建的最令人興奮的功能之一是色彩和諧生成器。事實(shí)證明，顏色之間是有關(guān)系的，就像音符一樣！以下是我實(shí)現(xiàn)色彩和諧的方法：

def get_color_harmonies(self, color):
    """
    This is probably my favorite piece of code in the entire project.
    It's like playing with a color wheel, but in code!
    """
    h, s, l = color.hsl['h'], color.hsl['s'], color.hsl['l']
    return {
        'complementary': self._get_complementary(h, s, l),
        'analogous': self._get_analogous(h, s, l),
        'triadic': self._get_triadic(h, s, l),
        'split_complementary': self._get_split_complementary(h, s, l)
    }
def _get_analogous(self, h, s, l):
    # The magic numbers that make designers happy
    return [
        self._hsl_to_hex((h - 30) % 360, s, l),
        self._hsl_to_hex(h, s, l),
        self._hsl_to_hex((h + 30) % 360, s, l)
    ]

無障礙

最令人大開眼界的是色盲用戶提交的反饋。我完全忽略了可訪問性！這促使我實(shí)現(xiàn)色盲模擬：

def simulate_color_blindness(self, color, type='protanopia'):
    """
    This feature wasn't in my original plan, but it became one of
    the most important parts of Colorify Rocks
    """
    matrices = {
        'protanopia': [
            [0.567, 0.433, 0],
            [0.558, 0.442, 0],
            [0, 0.242, 0.758]
        ],
        # Added more types after learning about different forms of color blindness
        'deuteranopia': [
            [0.625, 0.375, 0],
            [0.7, 0.3, 0],
            [0, 0.3, 0.7]
        ]
    }
    # Matrix multiplication that makes sure everyone can use our color palettes
    return self._apply_color_matrix(color, matrices[type])

隨著 Colorify Rocks 的發(fā)展，設(shè)計(jì)師開始要求更多功能。大的？顏色的色調(diào)和色調(diào)。這導(dǎo)致了一些有趣的實(shí)驗(yàn)：

def get_color_variations(self, color, steps=10):
    """
    This started as a simple feature request and turned into
    one of our most-used tools
    """
    return {
        'shades': self._generate_shades(color, steps),
        'tints': self._generate_tints(color, steps),
        'tones': self._generate_tones(color, steps)
    }

以上是顏色理論：以編程方式玩轉(zhuǎn)顏色的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！