소개

이 부분에서는 색상에 대한 이론을 설명하고 HSL 색상 패널을 구축할 것입니다. 이것은 제가 다룰 첫 번째 색상 선택기입니다.

참고: 색상 공간 변환의 이면에 있는 수학은 설명하지 않겠습니다.

색깔은 무엇입니까?

영어 Wikipedia에 따르면 색상은 빨강, 노랑, 파랑 등의 범주에 해당하는 인간의 시각적 지각 속성입니다.

컴퓨터 과학에서 색상은 다양한 방식으로 정의되며 RGB, CMYK, HSL, YCbCr 등과 같은 색상 공간이 있습니다.

이 부분에서는 RGB 및 HSL에 중점을 둘 것입니다.

하나의 통합된 색상 형식이 없는 이유는 무엇입니까?

불가능하니까요! 모든 색상 공간은 서로 다른 속성을 가지며 서로 다른 용도로 사용됩니다.

예를 들어 RGB와 CMYK를 얻자.

RGB

RGB는 빨강 녹색 및 파랑 채널을 사용하여 추가 색상 혼합으로 색상을 표현하는 색상 형식입니다. 즉, 세 가지 색상을 모두 투사하면 흰색이 됩니다.



RGB는 주로 디스플레이에 사용되며 각 픽셀은 R, G 및 B 채널인 3개의 "하위 픽셀"로 나뉩니다. 꺼지면 디스플레이가 검게 표시되므로* RGB가 작업에 적합합니다.

*음, 검은색은 화면 유형에 따라 다르게 표시됩니다. OLED는 개별 픽셀을 꺼서 그렇게 하지만 LED는 그렇게 할 수 없습니다. 검은색을 모방하므로 OLED 화면이 진정한 검은색을 얻을 수 있습니다.

왜 빨강, 초록, 파랑?

대답은 간단합니다. 그것은 우리의 눈이 어떻게 구성되어 있고 색상을 인지하는 방식 때문입니다. 자세한 내용은 다루지 않겠습니다. RGB에 대한 자세한 내용은 매우 복잡하고 자세한 내용을 참조하십시오Wikipedia article.

CMYK

시안, 마젠타, 노랑 및 키(검정)

반면에 CMYK는 가산이 아닌 감산 혼합을 사용하여 Cyan, Magenta 및 Yellow를 투사하면 검은색이 됩니다.



두 이미지에서 RGB와 CMY를 구별할 수 있음을 알 수 있습니다.

CMYK 색 공간은 주로 인쇄에 사용되며 종이 시트는 흰색이므로 흰색을 위해 잉크가 필요하지 않지만 검정색이 되려면 모든 색상이 필요하므로 RGB가 인쇄에 작동하지 않습니다. CMYK는 마젠타 잉크가 부족하여 때때로 검은색 문서를 인쇄할 수 없는 이유입니다.

색상 범위 그라데이션

어딘가에서 그런 그라데이션을 본 적이 있을 것입니다.



그런데, 어떻게 만들어지는 걸까?

HSL 형식을 소개하겠습니다.

색조, 채도 및 밝기

이것이 이름의 약자입니다. 각 값이 "별도의 색상"을 설명하지 않기 때문에 RGB 및 CMYK와 다릅니다.



색조 - 0-360° - 순수한 안료, 주요 속성
채도 - 0-100%(또는 0-1) - 회색 속성
밝기 - 0-100%(또는 0-1) - 색상 밝기 속성으로, 0은 검은색이고 100은 흰색입니다.

색조 값:

멋지긴 한데 어때요?

이 색 공간은 2D 공간에서 데이터를 쉽게 표현하는 데 이상적입니다. X 및 Y 좌표를 H 및 S 값과 연결할 수 있습니다. 그렇게 함으로써 위에서 언급한 그래디언트를 얻을 수 있습니다.

나는 그것을 생성하기 위해 파이썬에서 작은 gist을 준비했습니다.

from PIL import Image
import colorsys

width = 360
height = 100

image = Image.new("RGB", (width, height))

for y in range(height):
    for x in range(width):
        color = colorsys.hls_to_rgb(x / 359, abs((y/100) - 1), 1)
        image.putpixel((x,y), (int(color[0] * 255), int(color[1] * 255), int(color[2] * 255)))

image.save("ColorPalette.png", "PNG")

색상은 HSL에서 X, Y 좌표를 기준으로 계산되어 RGB로 변환되어 화면에 표시됩니다. 깔끔하지 않나요?

따라서 사용자가 이 그래디언트의 일부를 클릭할 때마다 좌표(X: 색조 - 0-360, Y: 채도 - 0-100 및 밝기 100%)를 기반으로 색상을 쉽게 얻을 수 있습니다.

HSL 색상 공간을 사용하여 거의 모든 다른 색상 선택 위젯을 만들 수 있습니다.

결론

단일 패널 HSL 색상 피커를 이해하는 데 필요한 거의 모든 지식을 설명했지만 색상에 대해 더 많은 것을 배울 수 있으며 이는 엄청난 주제이며 깊이 파고들 가치가 있습니다.

계속 지켜봐!