소개

이 팁은 더 큰 게시물(곧 공개)에 대한 보충 자료로, CSP에서 블렌딩 모드의 메커니즘을 이해하려고 시도하고 있습니다. 요점은 RGB 및 HSL 코드를 해석하고 색상 입력 및 결과를 직관적으로 예측하는 방법을 배우는 것입니다.

이 팁은 RGB(Red/Green/Blue)와 HSL(Hue/Saturation/Luminosity)에 초점을 맞춥니다. 이는 가장 일반적으로 사용되는 색상 시스템입니다. RGB와 HSL은 색상을 설명하는 두 가지 다른 방법이며 CSP에서 동시에 사용됩니다.

RGB 설명

RGB는 3가지 기본색만으로 광범위한 색상을 재현하는 방법입니다. 이는 인간의 눈이 주변에서 색상을 해석하는 방식 때문입니다. 인간의 눈에는 3가지 유형의 원뿔 세포가 있으며, 각각은 특정 색상인 렌, 그린, 블루에 반응하도록 설계되었습니다.

자연에서 가시광선 스펙트럼은 다양한 파장의 빛 범위를 포함하며, 상기 3가지 유형의 원뿔은 각각 해당 범위의 일부에 민감합니다. 그러나 색상 인식은 서로 다른 강도의 3가지 파장만 사용하여 쉽게 재현됩니다.

더 잘 표현하기 위해, 완전한 어둠 속에 자리 잡은 빨간색, 초록색, 파란색의 세 가지 광원을 상상해 보겠습니다. 0에서 255 사이의 값은 빛의 강도를 결정하는데, 0은 아무것도 없고 255는 최대 강도입니다.

아래 이미지는 최대 강도로 설정된 세 개의 램프에서 가능한 모든 조합을 보여줍니다. 빛이 겹치는 곳에서는 새로운 색상인 자홍색(빨강과 파랑), 노랑색(빨강과 초록), 청록색(초록과 파랑)이 생성됩니다.

 

모든 기본색이 겹치면 스펙트럼의 모든 색상이 혼합된 흰색이 생성됩니다.

색상 스펙트럼은 가능한 최대 채도의 색상(색조) 범위입니다.

 

모든 빨간색, 녹색, 파란색이 합쳐져 흰색이 됩니다. 이는 세 가지 색상이 함께 색조의 전체 스펙트럼을 커버하기 때문에 구별되는 단일 색조가 없기 때문입니다.

 

RGB 시스템에서 완전한 채도의 색상을 얻으려면 한 색상은 최대 밝기로 설정하고 다른 색상은 0으로 설정해야 합니다. 세 번째 색상은 0~100% 사이에서 진동하여 스펙트럼 전체에서 색조를 이동합니다. 채도는 가장 높은 값과 가장 낮은 값 사이의 차이(대비) 내에서 나타납니다.

더 어두운 색상을 얻으려면 RGB 값을 낮춰야 합니다. 밝기는 세 가지 색상 중 가장 높은 값에 따라 달라집니다.

CSP(및 다른 소프트웨어)에서 색조는 원이나 막대 형태로 제공되며, 채도와 밝기를 선택하기 전에 기본 색상을 선택할 수 있습니다.

HSL 시스템에서 색조는 비트 시스템의 값 대신 각도(0~360도)로 결정됩니다. 이는 링 모양 체계와 관련이 있습니다. 0은 순수한 빨간색(R: 255 G: 0 B: 0)을 나타내며 시계 방향으로 진행됩니다. 색조 번호를 보면 기본 색상(채도 또는 밝기는 제외)을 추정할 수 있습니다.

60은 노란색을 나타냅니다.

120은 순수한 녹색을 나타냅니다.

180은 청록색을 나타냅니다.

240은 순수한 파란색을 나타냅니다.

300은 자홍색을 나타냅니다.

360/0은 순수한 빨간색을 나타냅니다. 원을 닫습니다.

요약하자면:

 

색조는 최대 강도의 한 색상과 선택적으로 결합된 모든 강도의 추가 색상 하나의 조합입니다. 이것이 색상 스펙트럼을 구성합니다. HSL 시스템은 색조를 원을 가로지르는 각도(0~360)로 설명합니다.

 

채도는 모든 RGB 값의 차이로 나타납니다. 가장 높은 채도는 가장 높은 값이 255이고 가장 낮은 값이 0일 때 발생하므로 차이는 255입니다. 가장 낮은 채도는 모든 값이 같을 때 발생하므로 모든 값의 차이는 0입니다.

 

광도는 RGB 요소 중 가장 높은 값과 같습니다. 값이 255이면 밝기가 가장 높습니다.

계산

저는 코드에서 색상을 시각화하는 공식을 생각해냈고 그 반대도 마찬가지였습니다. 오차 범위 1포인트로 색상을 정확히 찾아낼 수 있습니다.

색상을 선택할 때마다 수학을 할 필요는 없습니다.

하지만 작동 방식을 이해하면 직관적으로 색상을 찾고 블렌딩 모드와 같은 간단한 작업을 추정할 수 있습니다. 연습을 좀 하면 몇 가지 패턴을 알아차리고 직감적으로 코드와 색상을 읽기 시작할 것입니다.

실제로 적용해 보세요

운동할 시간입니다. 코드에 따라 색상을 찾을 수 있나요?

R: 182 G: 123 B: 0

R: 57 G: 72 B: 106

R: 150 G: 179 B: 164

색조를 찾는 것부터 시작해 봅시다. 그러기 위해서는 세 가지 중 가장 높은 값을 골라 색상환에서 그 색상부터 시작합니다. 그런 다음 두 번째로 높은 값을 보면 색조가 이웃 키 색상 중 하나로 이동합니다.

채도는 0이 아니며 색조를 인식할 수 있을 만큼 충분히 높다고 가정합니다.

채도와 밝기가 홀수일 때 색조를 읽기 어려울 수 있지만, 이 단계는 사실 간단합니다. 가장 높은 값과 가장 낮은 값의 차이를 선택합니다.

R: 182 G: 123 B: 0의 경우 182가 됩니다.

 

다음으로 중간 값을 선택하고 차이와의 비율을 확인합니다. 이 예에서는 182 중 123이 됩니다. 그다지 우아하지는 않지만 정확한 결과를 계산할 필요는 없고 대략적인 비율만 구하면 되는데, 3 중 2 또는 ~66%가 됩니다.

 

이제 보조 색상에 따라 색조를 이웃 키 색상으로 이동합니다. 이 경우 녹색이므로 공통 색상인 노란색으로 이동합니다. 대상 색조는 노란색 쪽으로 2/3 정도이므로 황갈색입니다.

 

다른 두 가지 예에서도 반복합니다.

제어 그림 :)

밝기를 찾을 시간입니다. 간단합니다. 가장 높은 값을 선택하고 채널 최대 비율을 확인합니다. 백분율이 낮을수록 색상이 덜 변합니다.

마지막으로 채도입니다. 다시 한 번 값 사이의 비율을 확인합니다. 이번에는 가장 낮은 값을 선택하고 0과 가장 높은 값 사이의 범위에서 비율을 확인합니다. 비율이 높을수록 왼쪽으로 더 이동합니다.

힌트: 언제든지 색상 설정 창을 열어 RGB 및 HSL 값을 변경하면 변경 사항을 직접 확인할 수 있습니다 :)

이것으로 이 글을 마칩니다. 저와 같은 다른 예술 덕후들에게 도움이 되었으면 좋겠습니다! 다음 글에서는 블렌딩 모드의 기술적 측면을 논의하겠습니다. :)

참고문헌

https://en.wikipedia.org/wiki/RGB_color_model

https://www.sas.upenn.edu/\~scottds/vision/colorvis.htm