Heim Backend-Entwicklung Python-Tutorial Farbtheorie: Programmatisches Spielen mit Farben

Farbtheorie: Programmatisches Spielen mit Farben

Nov 26, 2024 am 07:24 AM

Color Theory: Playing with Colors Programmatically

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})"
Nach dem Login kopieren

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)
    }
Nach dem Login kopieren

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)
    ]
Nach dem Login kopieren

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])
Nach dem Login kopieren

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)
    }
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie benutze ich eine schöne Suppe, um HTML zu analysieren? Wie benutze ich eine schöne Suppe, um HTML zu analysieren? Mar 10, 2025 pm 06:54 PM

Wie benutze ich eine schöne Suppe, um HTML zu analysieren?

Bildfilterung in Python Bildfilterung in Python Mar 03, 2025 am 09:44 AM

Bildfilterung in Python

So verwenden Sie Python, um die ZiPF -Verteilung einer Textdatei zu finden So verwenden Sie Python, um die ZiPF -Verteilung einer Textdatei zu finden Mar 05, 2025 am 09:58 AM

So verwenden Sie Python, um die ZiPF -Verteilung einer Textdatei zu finden

Wie man mit PDF -Dokumenten mit Python arbeitet Wie man mit PDF -Dokumenten mit Python arbeitet Mar 02, 2025 am 09:54 AM

Wie man mit PDF -Dokumenten mit Python arbeitet

Wie kann man mit Redis in Django -Anwendungen zwischenstrichen Wie kann man mit Redis in Django -Anwendungen zwischenstrichen Mar 02, 2025 am 10:10 AM

Wie kann man mit Redis in Django -Anwendungen zwischenstrichen

Wie führe ich ein tiefes Lernen mit Tensorflow oder Pytorch durch? Wie führe ich ein tiefes Lernen mit Tensorflow oder Pytorch durch? Mar 10, 2025 pm 06:52 PM

Wie führe ich ein tiefes Lernen mit Tensorflow oder Pytorch durch?

Serialisierung und Deserialisierung von Python -Objekten: Teil 1 Serialisierung und Deserialisierung von Python -Objekten: Teil 1 Mar 08, 2025 am 09:39 AM

Serialisierung und Deserialisierung von Python -Objekten: Teil 1

So implementieren Sie Ihre eigene Datenstruktur in Python So implementieren Sie Ihre eigene Datenstruktur in Python Mar 03, 2025 am 09:28 AM

So implementieren Sie Ihre eigene Datenstruktur in Python

See all articles