首页 > 后端开发 > Python教程 > 颜色理论:以编程方式玩转颜色

颜色理论:以编程方式玩转颜色

Patricia Arquette
发布: 2024-11-26 07:24:11
原创
758 人浏览过

Color Theory: Playing with Colors Programmatically

当我第一次开始构建 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板