Lädt...


🔧 Color Theory: Playing with Colors Programmatically


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

When I first started building Colorify Rocks, my color palette website, I had no idea how deep the rabbit hole of programmatic color manipulation would go. What started as a simple "let me build a color picker" project turned into a fascinating journey through color theory, mathematical color spaces, and accessibility considerations. Today, I want to share what I learned while building this tool, along with some Python code that might help you in your own color adventures.

It's Just Colors, How Hard Can It Be?

Oh, past me. How naive you were! My journey started with a simple goal: build a website where people could generate and save color palettes. Easy, right? Just grab a hex code and... wait, what's HSL? And why do we need RGB? And what in the world is CMYK?

Want to see what I'm talking about? Check out our color analysis for #3B49DF

Here's the first piece of code I wrote to handle color conversions, which now makes me chuckle at its simplicity:

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

Everything is Math

Then came the moment I realized that colors are basically just math in disguise. Converting between color spaces meant diving into algorithms I hadn't touched since high school. Here's what the code evolved into

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

Colors Have Relationships

One of the most exciting features I built for Colorify Rocks was the color harmony generator. It turns out colors have relationships with each other, just like musical notes! Here's how I implemented color harmonies:

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

Accessibility

The biggest eye-opener came when a user with color blindness submitted feedback. I had completely overlooked accessibility! This led me to implement color blindness simulation:

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

As Colorify Rocks grew, designers started asking for more features. The big one? Shades and tints of colors. This led to some fun experimentation:

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

🔧 Color Theory: Playing with Colors Programmatically


📈 69.63 Punkte
🔧 Programmierung

🔧 HSL Color Theory: How to Use Hue, Saturation, and Lightness for Perfect Color Schemes


📈 32.94 Punkte
🔧 Programmierung

🔧 Update TailwindCSS color palette programmatically


📈 31.74 Punkte
🔧 Programmierung

🔧 A deep dive into the CSS color-mix() function and future of colors on the web.


📈 23.85 Punkte
🔧 Programmierung

🔧 Marking up colors, revisited with GitHub’s color swatches


📈 23.85 Punkte
🔧 Programmierung

📰 Get this floor lamp with 300 multi-color effects and 16 million colors for just $60


📈 23.85 Punkte
📰 IT Nachrichten

📰 How to copy colors on macOS with System Color Picker


📈 23.85 Punkte
📰 IT Nachrichten

📰 How to copy colors with the Color Picker tool in PowerToys


📈 23.85 Punkte
📰 IT Nachrichten

📰 Why Does Windows 10 Say “This Color Is Not Supported” When Selecting Accent Colors


📈 23.85 Punkte
🖥️ Betriebssysteme

🪟 Why Does Windows 10 Say “This Color Is Not Supported” When Selecting Accent Colors


📈 23.85 Punkte
🪟 Windows Tipps

🪟 Printer printing wrong colors? Fix printer color problems


📈 23.85 Punkte
🪟 Windows Tipps

🔧 Building a Robust Color Mixing Engine: From Theory to Implementation


📈 22.69 Punkte
🔧 Programmierung

🔧 Color Theory in UI Design


📈 22.69 Punkte
🔧 Programmierung

🔧 Mastering Color Theory in Web Design: A Comprehensive Guide


📈 22.69 Punkte
🔧 Programmierung

🔧 Color Theory: Detailed Guide For UI Designers [2023]


📈 22.69 Punkte
🔧 Programmierung

📰 Word Embeddings Align with Kandinsky’s Theory of Color


📈 22.69 Punkte
🔧 AI Nachrichten

🔧 My journey through programmatically creating Umbraco `stuff`


📈 21.48 Punkte
🔧 Programmierung

🐧 Programmatically Disconnect Device From Another Device


📈 21.48 Punkte
🐧 Linux Tipps

🔧 Programmatically Navigate Using React Router and Hooks


📈 21.48 Punkte
🔧 Programmierung

🔧 Vulcan - Exposing Eclipse JDT Programmatically


📈 21.48 Punkte
🔧 Programmierung

🔧 Analyze your builds programmatically with the C++ Build Insights SDK


📈 21.48 Punkte
🔧 Programmierung

🔧 How to programmatically backup your Firestore database with simple steps


📈 21.48 Punkte
🔧 Programmierung

🔧 Programmatically change your system’s mic and speakers with NirCmd and Elgato StreamDeck


📈 21.48 Punkte
🔧 Programmierung

🔧 How to Programmatically Cancel MRP Records in Odoo


📈 21.48 Punkte
🔧 Programmierung

🐧 How to ( programmatically ) tell who is running "the" window manager?


📈 21.48 Punkte
🐧 Linux Tipps

🔧 Add alternate contacts to AWS Organization member accounts programmatically


📈 21.48 Punkte
🔧 Programmierung

🔧 Programmatically deploy your GitHub Repo on Netlify


📈 21.48 Punkte
🔧 Programmierung

🐧 How could i start a software and inject a String so i can later programmatically fetch it (i'll use python)


📈 21.48 Punkte
🐧 Linux Tipps

🔧 Programmatically Setting File Inputs in JavaScript


📈 21.48 Punkte
🔧 Programmierung

🔧 How to Programmatically Highlight Text with the CSS Custom Highlight API


📈 21.48 Punkte
🔧 Programmierung

🐧 Editing Configuration Files Programmatically


📈 21.48 Punkte
🐧 Linux Tipps

🔧 Programmatically Setting File Inputs in JavaScript


📈 21.48 Punkte
🔧 Programmierung

matomo