Teori Warna: Bermain dengan Warna Secara Pengaturcaraan

Apabila saya mula membina Colorify Rocks, tapak web palet warna saya, saya tidak tahu sejauh mana kedalaman lubang arnab manipulasi warna terprogram. Apa yang bermula sebagai projek mudah "biar saya bina pemilih warna" bertukar menjadi perjalanan yang menarik melalui teori warna, ruang warna matematik dan pertimbangan kebolehaksesan. Hari ini, saya ingin berkongsi perkara yang saya pelajari semasa membina alat ini, bersama beberapa kod Python yang mungkin membantu anda dalam pengembaraan warna anda sendiri.

Ia Hanya Warna, Betapa Kerasnya?

Oh, lalu saya. Betapa naifnya awak! Perjalanan saya bermula dengan matlamat mudah: membina tapak web di mana orang boleh menjana dan menyimpan palet warna. Mudah, kan? Hanya ambil kod hex dan... tunggu, apakah itu HSL? Dan mengapa kita memerlukan RGB? Dan apakah di dunia ini CMYK?

Nak tengok apa yang saya cakapkan? Lihat analisis warna kami untuk #3B49DF

Inilah sekeping kod pertama yang saya tulis untuk mengendalikan penukaran warna, yang kini membuatkan saya ketawa melihat kesederhanaannya:

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

Semuanya adalah Matematik

Kemudian tibalah saat saya menyedari bahawa warna pada asasnya hanyalah matematik dalam penyamaran. Menukar antara ruang warna bermakna menyelam ke dalam algoritma yang saya tidak pernah sentuh sejak sekolah menengah. Inilah kod yang berubah menjadi

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

Warna Mempunyai Hubungan

Salah satu ciri paling menarik yang saya bina untuk Colorify Rocks ialah penjana harmoni warna. Ternyata warna mempunyai hubungan antara satu sama lain, sama seperti nota muzik! Begini cara saya melaksanakan harmoni warna:

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

Kebolehcapaian

Pembuka mata terbesar datang apabila pengguna yang buta warna menyerahkan maklum balas. Saya telah terlepas pandang sepenuhnya kebolehaksesan! Ini membawa saya untuk melaksanakan simulasi buta warna:

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

Apabila Colorify Rocks berkembang, pereka mula meminta lebih banyak ciri. Yang besar? Lorek dan tint warna. Ini membawa kepada beberapa percubaan yang menyeronokkan:

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

Atas ialah kandungan terperinci Teori Warna: Bermain dengan Warna Secara Pengaturcaraan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!