본문 바로가기
두들낙서/프로그래밍

PyOpenGL로 3차원 색상구(球) 만들기 1편 - HSV와 HSL

by 두들낙서 2020. 2. 29.

얼마전 갑자기 아이디어가 떠올라서 만들어본 프로젝트.
3차원이기 떄문에 색상환은 아니고 색상구(球)라 하는 게 맞을 듯하다.

결과물은 대충 이렇게 생겼다.

일반적인 컴퓨터 모니터는 빨강, 초록, 파랑 LED를 사용하기 때문에, 컴퓨터에서 색을 저장할 때 보통 빨강, 초록, 파랑 LED의 밝기, 즉 RGB로 색을 나타내곤 한다. 각막의 원뿔세포가 빨강, 초록, 파랑에 해당하는 파장의 빛에 반응해 뇌로 신호를 보내면 뇌가 어떤 색깔인지를 인식한다. 그런데 대부분의 사람들은 색깔을 단순한 RGB 정보로 인식하는 데 익숙하지 않다. '빨간 빛 50%, 초록 빛 30%, 파란 빛 10%가 섞인 색'이라 말하면 그래픽이나 웹 디자인 쪽에 일하는 사람이 아닌 이상 어떤 색인지 감을 잡기 힘들다.

참고로 그 색은 이렇게 생겼다. 안물

아무튼 디자인 업계에 종사하는 사람들조차 RGB로 색을 찾는 것을 반갑게 여기지 않기 때문에, 인간이 색을 인지하는 방식과 유사한 HSV 또는 HSL 방식을 많이 사용한다. 이 두 방식의 기본적인 접근 방식은 색상(Hue), 채도(Saturation), 밝기(Value/Lightness)의 3가지 척도로 색깔을 표현하는 것이다. 색상은 말 그대로 어느 색 계통인지(빨주노초파남보), 채도는 그 색이 얼마나 선명(?)한지(채도가 낮을수록 색이 회색조에 가깝고, 높을수록 원색에 가깝다), 밝기도 말 그대로 색이 얼마나 밝은지를 나타낸다. 즉, '연한 파란색'이라 함은 "색상이 파란색이고 채도는 낮으며 밝기가 높은 색"을 의미한다 볼 수 있고, 이게 우리가 색을 인지하는 방식이다.

대부분의 문서 작성이나 그래픽 관련 프로그램에 내장된 색 고르기 기능(영어로는 color picker라고 하는데 한국어로는 모르겠다.)은 이런 방식을 사용한다. 실제로 구글에 color picker라고 치면 이 기능을 웹에서 바로 사용할 수 있다. (역시 구글갓) 아래쪽에 보이는 알록달록한 막대로 색상을 조절할 수 있고, 위쪽 그라데이션 직사각형의 세로축은 Value, 가로축은 채도이다.

눈치챘을 수도 있지만, 구글의 color picker는 HSV 시스템을 채택하고 있다. HSV와 HSL의 차이는 무엇일까? 바로 "밝기가 최대이면서 채도가 최대인 색이 무엇일까?"라는 질문의 답에 있다. HSV에서는 그 색을 원색(파랑, 빨강 등)이라고 답하고, HSL에서는 흰색이라 답한다.

위키백과에 찾아보면 이 둘의 차이가 너무 잘 나와있는 그림이 있다.

Author: SharkD (https://commons.wikimedia.org/wiki/User:Datumizer)

HSL은 아무리 채도가 높아도 밝기가 최대이거나 최소이면 흰색 또는 검은색이라고 말한다. 하지만 흰색과 검은색의 채도를 논하는 것 자체가 좀 웃기다. 이때 생각난 것이 바로 구면좌표계이다. 위도가 최대인 북극과 남극에서는 경도를 논할 수 없는 점과 비슷하지 않은가.

그래서 북극은 흰색, 남극을 검은색, 적도를 가장 채도가 높은 원색들로 배치해 맨 위의 저 그림과 같은 구를 만들면 어떨까 생각하게 되었다.

다음 편에서는 좀더 수학적인 설계에 대해 이야기해보도록 하겠다.

댓글