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

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

ああ、私の前を通り過ぎました。あなたはなんて純樸だったのでしょう！私の旅は、人々がカラー パレットを生成して保存できる Web サイトを構(gòu)築するという単純な目標(biāo)から始まりました。簡単ですよね？ 16 進(jìn)コードを取得して...ちょっと待って、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},)"

すべては數(shù)學(xué)です

そして、色は基本的に単なる數(shù)學(xué)の仮面をかぶったものであることに気づいた瞬間が來ました。色空間間の変換は、高校以來觸れていなかったアルゴリズムに飛び込むことを意味しました。コードは次のように進(jìn)化しました

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 用に構(gòu)築した最もエキサイティングな機(jī)能の 1 つは、カラー ハーモニー ジェネレーターでした。音符と同じように、色には相互の関係があることが分かりました。カラーハーモニーを?qū)g裝する方法は次のとおりです:

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)
    ]

アクセシビリティ

最も目を見張るものは、色覚異常を持つユーザーがフィードバックを送信したときでした。アクセシビリティを完全に見落としていました！これにより、色覚異常のシミュレーションを?qū)g裝することになりました。

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 が成長するにつれて、デザイナーはより多くの機(jī)能を求め始めました。大きいものは？色の色合いと色合い。これにより、いくつかの楽しい実験が始まりました:

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)
    }

以上が色彩理論: プログラムで色をいじるの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。