컬러 믹서
디자인 시안에 색이 두 개 정해져 있는데 그 사이를 어떻게 이어야 할지 몰라 멈춰 본 적 있으실 겁니다. 버튼 그라데이션, 차트 막대 색 구분, 태그 배지의 단계별 색조. 코드는 짜겠는데 "이 빨강과 저 파랑 사이 중간색이 뭐냐"는 순간 손이 안 나가죠. 컬러 믹서는 색 두 개만 정하면 그 사이를 일정 간격으로 나눈 중간색과 HEX 코드를 한 번에 뽑아 주는 도구입니다.
디자이너 없이 UI까지 떠안게 되면서 색 고르는 데 시간을 제일 많이 썼습니다. 스포이드로 찍고 눈대중으로 값을 조금씩 옮기다 보면 한나절이 갔고요. 두 끝 색만 정하면 나머지는 계산으로 채워지니, 그 반복을 없애려고 만들었습니다.
사용 방법
-
왼쪽에서 기준 색상 1과 기준 색상 2를 정합니다. 동그란 색상 원을 클릭하면 팔레트가 열리고, 정확한 값이 있으면 아래 입력칸에 #bf1d1d 같은 HEX 코드를 바로 넣어도 됩니다.
-
오른쪽 위 Step 수에서 몇 단계로 나눌지 고릅니다. 8, 12, 16, 20 중에 선택하며, 양 끝 색을 포함한 전체 칸 수입니다. 바로 옆 띠는 두 색을 이은 그라데이션 미리보기입니다.
-
아래 격자에서 원하는 색을 클릭하면 그 칸의 HEX 코드가 복사됩니다. 시안에 필요한 딱 그 단계만 골라 코드에 붙여넣으세요.
두 색을 섞으면 무슨 색이 나올까
컬러 믹서는 두 색의 R, G, B 값을 각각 따로 놓고 일정 비율로 나눕니다. 시작 빨강값과 끝 빨강값 사이를 단계 수만큼 등분하고, 초록과 파랑도 같은 방식으로 나눠 각 칸의 색을 만들죠. 이걸 선형 보간이라고 부르는데, 계산이 단순하고 결과가 예측 가능해서 그라데이션에 가장 널리 쓰입니다. #000000에서 #FFFFFF로 갈 때 딱 절반이 회색 #808080으로 떨어지는 게 이 방식의 특징입니다.
다만 RGB 값 사이를 직선으로 잇는다고 사람 눈에 보이는 색까지 고르게 변하는 건 아닙니다. 특히 색상환에서 서로 먼 두 색, 이를테면 빨강과 파랑을 이으면 중간 어딘가가 유독 탁하고 어두워 보입니다. 눈은 밝기와 채도를 값 그대로 받아들이지 않기 때문이죠.
칙칙해진 그라데이션 되살리기
빨강과 초록처럼 색상환에서 마주 보는 두 색을 RGB로 섞으면 중간이 흙탕물 같은 갈색이나 회색으로 죽어 버립니다. 두 색의 채도가 중간 지점에서 서로 상쇄되면서 무채색에 가까워지기 때문입니다. 이론이 아니라, 만든 그라데이션을 화면에 깔아 보면 가운데만 유독 생기가 없는 게 바로 보이죠.
가장 쉬운 해법은 두 색을 색상환에서 가까운 쪽으로 좁히는 겁니다. 빨강에서 곧장 파랑으로 넘어가는 대신 빨강에서 자주로, 자주에서 파랑으로 가는 식으로요. 컬러 믹서로 빨강과 자주 구간, 자주와 파랑 구간을 따로 뽑아 이어 붙이면 중간이 죽지 않는 그라데이션이 나옵니다. 중간 경유색을 하나 끼워 두 번 섞는 셈입니다.
두 색의 밝기 차이가 클 때도 가운데가 애매해집니다. 아주 밝은 색과 아주 어두운 색을 바로 이으면 중간 단계가 흐리멍덩하게 뭉치죠. 이럴 땐 밝기를 어느 정도 맞춘 두 색을 기준으로 잡고, 명암은 그라데이션이 아니라 투명도나 그림자로 따로 주는 편이 훨씬 깔끔합니다.