처음 색상 팔레트 웹사이트인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
