當我第一次開始建立 Colorify Rocks（我的調色板網站）時，我不知道程式化顏色操作的兔子洞有多深。最初是一個簡單的「讓我建立一個顏色選擇器」項目，後來變成了一次透過顏色理論、數學顏色空間和可訪問性考慮的迷人旅程。今天，我想分享我在建立此工具時學到的知識，以及一些可能對您自己的色彩冒險有所幫助的 Python 程式碼。
哦，過了我。那時的你多麼天真啊！我的旅程始於一個簡單的目標：建立一個網站，人們可以在其中產生和保存調色板。容易，對吧？只需取得一個十六進位代碼，然後...等等，什麼是 HSL？為什麼我們需要 RGB？那麼 CMYK 到底是什麼呢？
想看看我在說什麼嗎？看看我們對 #3B49DF 的顏色分析
這是我寫的第一段用來處理顏色轉換的程式碼，現在它的簡單性讓我咯咯笑：
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},{b})"
然後我意識到顏色基本上只是偽裝的數學。在色彩空間之間進行轉換意味著深入研究我從高中以來就沒有接觸過的演算法。以下是程式碼演變成的內容
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)
}
我為 Colorify Rocks 建造的最令人興奮的功能之一是色彩和諧產生器。事實證明，顏色之間是有關係的，就像音符一樣！以下是我實現色彩和諧的方法：
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)
]
最令人大開眼界的是色盲用戶提交的回饋。我完全忽略了可訪問性！這促使我實現色盲模擬：
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 的發展，設計師開始要求更多功能。大的？顏色的色調和色調。這導致了一些有趣的實驗：
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)
}
以上是顏色理論：以程式方式玩顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
