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 KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

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)

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

So herunterladen Sie Dateien in Python So herunterladen Sie Dateien in Python Mar 01, 2025 am 10:03 AM

So herunterladen Sie Dateien in Python

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

Bildfilterung in Python

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?

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

Einführung des natürlichen Sprach -Toolkits (NLTK) Einführung des natürlichen Sprach -Toolkits (NLTK) Mar 01, 2025 am 10:05 AM

Einführung des natürlichen Sprach -Toolkits (NLTK)

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?

See all articles