Farbtheorie: Programmatisches Spielen mit Farben

Als ich mit der Erstellung von Colorify Rocks, meiner Farbpaletten-Website, begann, hatte ich keine Ahnung, wie tief das Kaninchenloch der programmatischen Farbmanipulation gehen würde. Was als einfaches „Lass mich einen Farbwähler bauen“-Projekt begann, entwickelte sich zu einer faszinierenden Reise durch Farbtheorie, mathematische Farbräume und Überlegungen zur Zugänglichkeit. Heute möchte ich teilen, was ich beim Erstellen dieses Tools gelernt habe, zusammen mit etwas Python-Code, der Ihnen bei Ihren eigenen Farbabenteuern helfen könnte.

Es sind nur Farben, wie schwer kann es sein?

Oh, an mir vorbei. Wie naiv du warst! Meine Reise begann mit einem einfachen Ziel: eine Website zu erstellen, auf der Menschen Farbpaletten erstellen und speichern können. Einfach, oder? Schnappen Sie sich einfach einen Hex-Code und ... Moment, was ist HSL? Und warum brauchen wir RGB? Und was in aller Welt ist CMYK?

Möchten Sie sehen, wovon ich spreche? Schauen Sie sich unsere Farbanalyse für #3B49DF an

Hier ist der erste Code, den ich geschrieben habe, um Farbkonvertierungen durchzuführen, und jetzt muss ich über seine Einfachheit schmunzeln:

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

Alles ist Mathematik

Dann kam der Moment, in dem mir klar wurde, dass Farben im Grunde nur eine versteckte Mathematik sind. Die Konvertierung zwischen Farbräumen bedeutete, mich mit Algorithmen zu befassen, die ich seit der High School nicht mehr berührt hatte. Hier erfahren Sie, woraus sich der Code entwickelt hat

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

Farben haben Beziehungen

Eine der aufregendsten Funktionen, die ich für Colorify Rocks entwickelt habe, war der Farbharmoniegenerator. Es stellt sich heraus, dass Farben Beziehungen zueinander haben, genau wie Musiknoten! So habe ich Farbharmonien umgesetzt:

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

Zugänglichkeit

Der größte Augenöffner war, als ein Benutzer mit Farbenblindheit Feedback abgab. Ich hatte die Barrierefreiheit völlig übersehen! Dies veranlasste mich, eine Simulation der Farbenblindheit zu implementieren:

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

Als Colorify Rocks wuchs, begannen Designer, nach mehr Funktionen zu fragen. Der Große? Schattierungen und Farbtöne. Dies führte zu einigen lustigen Experimenten:

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

Das obige ist der detaillierte Inhalt vonFarbtheorie: Programmatisches Spielen mit Farben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!