색상 이론: 프로그래밍 방식으로 색상 활용

처음 색상 팔레트 웹사이트인 Colorify Rocks를 구축하기 시작했을 때 프로그래밍 방식 색상 조작의 토끼굴이 얼마나 깊어질지 전혀 몰랐습니다. 단순한 "색상 선택기 만들기" 프로젝트로 시작된 것이 색상 이론, 수학적 색상 공간 및 접근성 고려 사항을 통한 매혹적인 여정으로 바뀌었습니다. 오늘은 여러분의 색상 모험에 도움이 될 수 있는 몇 가지 Python 코드와 함께 이 도구를 구축하면서 배운 내용을 공유하고 싶습니다.

단지 색상일 뿐인데, 얼마나 어려울 수 있나요?

아, 저를 지나쳤어요. 당신은 얼마나 순진했는가! 나의 여정은 사람들이 색상 팔레트를 생성하고 저장할 수 있는 웹사이트를 구축한다는 단순한 목표로 시작되었습니다. 쉽지요? 16진수 코드를 잡고... 잠깐, HSL이 뭐예요? 그리고 왜 RGB가 필요한가요? 그런데 CMYK가 도대체 ​​뭐죠?

내가 무슨 말을 하는지 보고 싶으신가요? #3B49DF

에 대한 색상 분석을 확인하세요.

색상 변환을 처리하기 위해 제가 작성한 첫 번째 코드는 다음과 같습니다. 이제 그 단순함에 웃음이 나옵니다.

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

모든 것이 수학이다

그러다가 색상은 기본적으로 변장된 수학일 뿐이라는 사실을 깨달은 순간이 왔습니다. 색 공간 간 변환은 고등학교 이후로 접해본 적이 없는 알고리즘에 뛰어드는 것을 의미했습니다. 코드는 다음과 같이 발전했습니다.

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

색상에는 관계가 있습니다

Colorify Rocks를 위해 만든 가장 흥미로운 기능 중 하나는 색상 조화 생성기였습니다. 색상은 음표처럼 서로 관계가 있다는 것이 밝혀졌습니다! 색상 조화를 구현한 방법은 다음과 같습니다.

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

접근성

색맹이 있는 사용자가 피드백을 제출했을 때 가장 놀랐습니다. 접근성을 완전히 간과했습니다! 이로 인해 색맹 시뮬레이션을 구현하게 되었습니다.

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

Colorify Rocks가 성장함에 따라 디자이너들은 더 많은 기능을 요구하기 시작했습니다. 큰 것? 색상의 음영과 색조. 이로 인해 재미있는 실험이 이루어졌습니다.

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

위 내용은 색상 이론: 프로그래밍 방식으로 색상 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!