내가 색을 하나 고르고 싶으면
모비노기에서처럼 이상한 색상 뽑기를 해야되는게 아니라
보통은 칼라픽커라는 툴이 있습니다.
▲ 그럼 HSB, HSL이라는 방법으로 색을 뽑을 수 있지만 초보자들은 열심히 써봐도 개떡같은 색 조합만 뽑아냅니다.
그건 여러분들 잘못이 아니라 그냥 도구 잘못일 수 있습니다.
요즘은 초보도 훨씬 쉽게 이쁜 색상들을 고를 수 있는 OKLAB, OKLCH 같은 방법들이 나와있습니다.
그래서 그걸로 모든 색상을 갈아치워야 된다고 호들갑 떠는게 유행인데
왜 굳이 이걸 쓰는게 좋은지 알아보도록 합시다.
RGB 색상표현
색상을 컴퓨터에서 표현하는 방식이 좀 문제가 많습니다.
가장 익숙한 표현방식이 아마 RGB일텐데
3개의 숫자를 이용해서 각각 빨강 초록 파랑이라는 원색을 얼마나 함유하고 있는지를 결정해서 색상을 표현하는 방식입니다.
숫자는 0부터 255까지 넣을 수 있습니다.
예를 들어 빨강수치를 높이면 이런 색이 되고
빨강, 초록수치를 둘 다 높이면 점점 이런 색으로 변합니다.
3개를 끝까지 올리면 흰색이고 그런 식이에요.
하지만 RGB는 컴퓨터 입장에서 편리하지 사람한테는 매우 불편합니다.
(122,66,20) 이게 무슨 색이게요?
더러운 똥색이었습니다.
RGB 조합을 전부 외워놓지 않는 이상 색을 추론하기가 매우 어렵습니다.
물론 더 쉬운 색상 표현방식도 있습니다.
HSL
그림 그릴 때는 RGB 대신 HSL을 쓰는 경우가 훨씬 많습니다.
Hue, Saturation, Lightness 수치를 각각 정해서 색을 표현하는 방식입니다.
일단 Hue는 각도로 표현을 하는데 Hue 각도를 대충 외워주면
나머지 값만 봤을 때 색상 추론도 굉장히 쉬워집니다.
이걸 RGB값으로 변환도 쉽기 때문에 이런 형식을 가장 많이 쓴다고 보면 되겠습니다.
HSB와 유사한 HSL도 자주 사용합니다. 계산법만 살짝 다를 뿐입니다.
그래픽 다루는 소프트웨어에서 가장 많이 볼 수 있는 칼라픽커도 이런 형식으로 칼라를 고를 수 있게 되어있습니다.
오른쪽 세로막대에서 Hue를 고르고 큰 정사각형에서는 좌우로 채도, 위아래로 밝기를 고르는 식입니다.
색상 하나를 딱 뽑는건 HSL 칼라픽커 써도 전혀상관이 없는데
색을 여러개 다루기 시작하면 눈이 썩기 시작합니다.
단점1. 일관성
예를 들자면 서로 같은 밝기의 색상을 뽑기가 굉장히 어렵습니다.
HSL과 유사한 HSB 색상에서 다른 부분은 고정하고 Hue만 변경해 봤습니다.
그럼 밝기 수치는 안변했으니까 이론상 밝기가 똑같은 색상들이 나와야 하잖아요.
근데 전혀 밝기가 똑같지 않습니다.
위에다가 흰글씨 입력해보면 확연한 밝기 차이가 있습니다.
왜 그러냐면 RGB 원색마다 사람이 느끼는 밝기는 너무 제각각인데
그걸 밝기가 똑같다고 가정하고 만들어낸 색체계라 그렇습니다.
이번엔 다른거 고정하고 Saturation만 동일 간격으로 줄여 봤습니다.
어떤 Hue들은 Saturation 차이가 확연히 나는데
보라색 같은 경우 Saturation 차이가 별로 보이지 않습니다.
그래서 RGB나 HSL 색상을 이용해서 서로 어울리는 색을 뽑으려면 엄청난 피지컬 컨트롤이 필요합니다.
그래서 맨날 칼라팔레트 구걸하러 다니고 그걸 또 여러 모니터에서 확인해 보고 그럴 수밖에 없는 겁니다.
단점2. gradient
Gradient 라고 부르는 연속된 색상을 넣을 때는 눈이 썩는 상황이 더 많습니다.
빨강에서 초록으로 gradient를 넣어봤는데
민감한 사람들은 바로 알아챌 것 같은데 중간 부분이 뭔가 이상하게 어둡지 않습니까?
그래서 gradient 넣을 때도 중간 색상을 여러개 지정한다든지 해서 엄청난 색감 피지컬 컨트롤이 필요하게 됩니다.
LAB (CIELAB)
그게 싫으면 색을 정의하는 공간을 바꾸면 되겠습니다.
CIELAB이라는 색 공간이 있습니다.
GPT 덕분에 CIELAB 시각화를 좀 해봤습니다.
이게 뭐냐면 사람이 느끼기에 색 차이가 비교적 일정하게 나도록 색들을 일부러 이상하게 배치해놓은 공간입니다.
그럼 아까 문제가 비교적 줄어듭니다.
여기서 색을 고르려면 L, a, b 값을 정하면 되는데
L은 검정 ~ 흰색
a는 녹색 ~ 빨강
b는 파랑 ~ 노랑 정도를 조절할 수 있습니다.
(참고) 가뮤트가 뭐냐면 모니터에서 표현이 가능한 색의 영역이라고 보면 되겠습니다.
LCH
하지만 Lab 색상은 인간 입장에서 조작하기 어렵습니다.
파랑에서 노랑정도를 조절해서 원하는 색 뽑기 쉽지 않을걸요.
그래서 Lab을 사람 입장에서 쓰기 좋게 치환한게 LCH 시스템입니다.
L은 검정 ~ 흰색
C는 색이 얼마나 진한가
H는 색조를 고르는 부분입니다.
그럼 우리가 평소에 쓰던 HSB, HSL 칼라픽커 느낌으로 색을 고를 수 있습니다.
근데 CIELAB 공간을 이용해서 색을 계산해줄 뿐입니다.
LCH를 쓰면 진짜 좋은지 실험을 좀 해보도록 합시다.
예를 들어 아까처럼 밝기는 유지하고 Hue만 좀 다르게 배치를 해봤습니다.
그러면 색상들이 전부 비슷한 밝기의 느낌이 나지 않습니까.
아니면 이번엔 다른건 고정하고 Lightness만 균일하게 바꿔봤습니다.
근데 색이 달라져도 Lightness가 되게 균일하게 차이가 나죠?
CIELAB은 사람이 시각적으로 보기에 균일한 차이가 나도록 색을 일부러 배치하고 계산도 그렇게 하기 때문에
밝기를 5% 조절하면 무슨 색조를 쓰든 사람이 느끼기에 진짜 5% 만큼 차이를 기대할 수 있습니다.
그래서 색들의 일관성이 중요하면 LCH를 쓰면 쉽게 해결됩니다.
OKLab
실은 LCH 쓰든 LAB을 쓰든 뭔가 어설픈 부분이 한두 군데 있습니다.
파란색의 경우 중간에 색이 이상해진다든지 그런 부분이 있는데
그래서 어떤 개발자가 블로그에 올린 글이 있습니다. (https://bottosson.github.io/posts/oklab/)
LAB보다 조금 더 개선된 LAB을 제안해놓은게 있고요.
OKLAB이라고 이름을 짓습니다.
근데 블로그에 글을 쓴 지 몇 년 만에 이 시스템이 CSS라든지 온갖 프로그램에 공식적으로 이식이 되어버렸습니다.
그래서 우리가 프로그래밍적으로 색을 다룰 때 OKLAB을 주로 사용할 수 있게 되었습니다.
프로그래밍 적으로 사용하는 법
예를 들어 CSS상에서 색상을 고를 때 요즘은 oklch() 문법을 지원해서 그거 써보면 되는데
색을 몇 개 일정하게 뽑고 싶을 때 쓰면 유용할 거예요.
예를 들어 밝기랑 크로마를 유지한 채 다른 Hue에서 색상을 뽑아볼 때도 유용하고,
아니면 밝기를 10%씩 균일하게 조절해서 다른 색상 조합을 만들어야 하면
이렇게 L 부분 숫자 조절만 하면 되겠습니다.
기존 HSB HSL 같은 걸 썼으면 숫자를 살짝 조절하면 이상한 색 조합이 나왔을 텐데
oklch()쓰면 초보도 자연스러운 느낌으로 색 조합을 쉽게 뽑을 수 있습니다.
background: oklch(from var(--button-color) calc(l + 0.1) c h);
심지어 from을 쓰면 어떤 색상이든 oklch 색으로 변환이 가능하고
그리고 calc쓰면 그 색상에서 프로그래밍적으로 원하는 숫자를 더하고 뺄 수도 있습니다.
gradient
이번엔 gradient를 줄 때도 굉장히 좋은 결과를 보여줍니다.
예를 들면 Hue만 변경하는 gradient를 주면 이런 차이가 있습니다.
이러면 밝기 같은게 자연스럽고 균일한 gradient를 만들 수 있는 겁니다.
css로 gradient 만들 때는 그냥 색상만 oklch로 잘 정하시면 되고
아니면 기존 rgb색상을 쓰고 있다면 "in oklab"이라는 마법의 단어만 추가하면 되겠습니다.
요즘은 포토샵 이런데도 gradient 넣을 때 "가시범위"를 선택하면 oklab을 이용해서 훨씬 이쁘게 gradient를 넣을 수 있습니다.
결론
사람냄새가 나는 색상을 다루고 싶으면 OKLCH, OKLAB을 써보면 좋습니다.
색 하나 뽑을 때는 아무 쓸데가 없을 수 있는데
색 조합을 뽑을 때, 특히 프로그래밍 적으로 색상을 다룰 때 편리하다는거 기억해둡시다.
내가 쓰는 소프트웨어에서 지원 안해도 인터넷에 OKLCH 칼라픽커가 많으니 활용해봐도 좋을 것 같습니다.
이제 키보드 LED 색조합도 이걸로 바꿔보고 머리 염색 gradient도 OKLCH로 하면 되겠군요.