Théorie des couleurs : jouer avec les couleurs par programmation

Lorsque j'ai commencé à créer Colorify Rocks, mon site Web sur la palette de couleurs, je n'avais aucune idée de la profondeur du terrier de la manipulation programmatique des couleurs. Ce qui a commencé comme un simple projet « laissez-moi construire un sélecteur de couleurs » s'est transformé en un voyage fascinant à travers la théorie des couleurs, les espaces colorimétriques mathématiques et les considérations d'accessibilité. Aujourd'hui, je souhaite partager ce que j'ai appris en créant cet outil, ainsi que du code Python qui pourrait vous aider dans vos propres aventures de couleurs.

Ce ne sont que des couleurs, à quel point cela peut-il être difficile ?

Oh, passé devant moi. Comme tu étais naïf ! Mon parcours a commencé avec un objectif simple : créer un site Web sur lequel les gens pourraient générer et enregistrer des palettes de couleurs. Facile, non ? Prenez simplement un code hexadécimal et... attendez, qu'est-ce que le HSL ? Et pourquoi avons-nous besoin du RVB ? Et qu'est-ce que le CMJN ?

Vous voulez voir de quoi je parle ? Consultez notre analyse des couleurs pour #3B49DF

Voici le premier morceau de code que j'ai écrit pour gérer les conversions de couleurs, et qui me fait maintenant rire de sa simplicité :

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

Tout est mathématique

Puis est venu le moment où j'ai réalisé que les couleurs n'étaient fondamentalement que des mathématiques déguisées. La conversion entre les espaces colorimétriques signifiait plonger dans des algorithmes auxquels je n'avais pas touché depuis le lycée. Voici en quoi le code a évolué

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

Les couleurs ont des relations

L'une des fonctionnalités les plus intéressantes que j'ai créées pour Colorify Rocks était le générateur d'harmonie des couleurs. Il s’avère que les couleurs ont des relations les unes avec les autres, tout comme les notes de musique ! Voici comment j'ai mis en œuvre les harmonies de couleurs :

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

Accessibilité

La plus grande révélation est venue lorsqu'un utilisateur daltonien a soumis ses commentaires. J'avais complètement négligé l'accessibilité ! Cela m'a amené à mettre en œuvre une simulation de daltonisme :

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

À mesure que Colorify Rocks grandissait, les concepteurs ont commencé à demander plus de fonctionnalités. Le grand ? Nuances et teintes de couleurs. Cela a conduit à des expérimentations amusantes :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!