色彩理論: プログラムで色をいじる

カラー パレット Web サイトである Colorify Rocks を最初に構築し始めたとき、プログラムによる色操作のウサギの穴がどれほど深くなるかわかりませんでした。シンプルな「カラーピッカーを作ってみよう」プロジェクトとして始まったものは、色彩理論、数学的色空間、アクセシビリティの考慮事項を巡る興味深い旅へと変わりました。今日は、このツールの構築中に学んだことと、独自の色の冒険に役立つかもしれないいくつかの Python コードを共有したいと思います。

色だけですが、どれくらい難しいでしょうか?

ああ、私の前を通り過ぎました。あなたはなんて純朴だったのでしょう！私の旅は、人々がカラー パレットを生成して保存できる Web サイトを構築するという単純な目標から始まりました。簡単ですよね？ 16 進コードを取得して...ちょっと待って、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 用に構築した最もエキサイティングな機能の 1 つは、カラー ハーモニー ジェネレーターでした。音符と同じように、色には相互の関係があることが分かりました。カラーハーモニーを実装する方法は次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。