이미지에서 색 뽑기, 픽커와 팔레트는 다른 작업이에요

“색 좀 뽑아줘”에는 두 가지가 섞여 있어요

작업 방식이 전혀 다른 두 가지가 같은 말로 불려요. 엉뚱한 쪽을 골라서 눈으로 본 것과 다른 결과가 나오는 일이 여기서 생겨요.

하나는 픽셀 하나를 집는 일이에요. 로고에 쓰인 정확한 파랑, 스크린샷 속 버튼 색, 제품 사진의 하이라이트처럼 특정 지점의 값이 필요한 상황이죠. 이때는 그 좌표에 실제로 저장된 값이 그대로 나와야 해요.

다른 하나는 이미지 전체를 대표하는 색 몇 개를 뽑는 일이에요. 무드보드를 만들 사진의 주요 색, UI를 맞출 일러스트의 전반적인 톤 같은 것들이요. 이건 픽셀 하나로는 답이 안 나와요. 수백만 개 픽셀을 요약하는 작업이고, 어디까지를 같은 색으로 볼지 판단이 들어가요.

픽셀 하나를 정확하게 집으려면

여기서 조심할 건 지금 클릭한 게 정말 그 픽셀이 맞는지예요. 화면에 보이는 이미지는 크기가 조정된 상태라, 커서 아래 픽셀이 실제로는 여러 픽셀이 섞인 값일 수 있어요. 미리보기가 아니라 원본 해상도에서 값을 읽어야 파일에 실제로 존재하는 색이 나와요.

JPEG도 함정이에요. JPEG는 색 정보를 해상도를 낮춰 저장하고 또렷한 경계 주변에서 값이 조금씩 흔들리기 때문에, 로고의 브랜드 컬러를 JPEG에서 집으면 몇 단계 어긋난 값이 나오기도 해요. PNG나 벡터 원본이 있다면 그쪽이 훨씬 믿을 만해요. 확대 돋보기로 어느 픽셀 위에 있는지 먼저 확인하고 찍는 습관을 들이면, 1px 테두리나 얇은 선을 집을 때 특히 도움이 돼요.

대표색은 이렇게 뽑혀요

팔레트 추출은 비슷한 픽셀을 묶는 작업이고, 흔히 쓰는 방식이 미디언 컷이에요. 모든 픽셀을 색 공간의 점으로 두고, 가장 넓게 퍼진 덩어리를 둘로 쪼개는 걸 원하는 개수가 될 때까지 반복한 다음, 덩어리마다 평균을 내서 색 하나로 만들어요. 이미지에서 차지하는 면적 순으로 정렬하면 진짜 주요 색이 앞에 오고요.

여기서 두 가지가 설명돼요. 먼저 도구마다 결과가 다른 이유예요. 색이 퍼진 정도와 픽셀 수 중 뭘 더 중요하게 볼지 도구마다 기준이 달라서, 결과가 정확히 같기가 오히려 어려워요. 그리고 개수를 바꾸면 목록 길이만 늘어나는 게 아니라 성격 자체가 달라져요. 46개는 큰 흐름의 색만 남아서 브랜드 보드에 어울리고, 1216개쯤 되면 비슷한 색의 변주가 들어오기 시작해서 일러스트의 색 범위에 UI를 맞출 때 쓸모가 있어요. 단색 몇 개로 된 로고는 개수와 상관없이 깔끔하게 나오지만, 그러데이션이 부드러운 사진은 애초에 정답이 하나가 아니에요.

포맷마다 쓰임이 달라요

같은 색도 표기법이 여럿이고, 서로 바꿔 써도 되는 게 아니에요. HEX는 전달용 기본값이에요. 짧고 헷갈릴 여지가 없어서 어느 툴에서든 통해요. RGB는 같은 정보를 십진수로 적은 거라 채널 값을 계산에 쓸 때 편하고요. HSL은 색상·채도·명도를 나눠 두기 때문에 한 색에서 밝기 단계를 만들 때 좋아요. 색상은 고정하고 명도만 조절하면 톤이 흐트러지지 않는 색 계단이 나와요. HSB는 이름은 비슷하지만 다른 모델이고, 포토샵·일러스트레이터의 색상 창이 쓰는 값이라 어도비로 값을 옮겨 적을 때 이쪽을 보면 돼요. CMYK는 인쇄용인데, 따로 짚고 넘어갈 부분이 있어요.

CMYK 값을 그대로 믿으면 안 돼요

브라우저에는 변환에 쓸 ICC 프로파일이 없어요. 그래서 여기 보이는 CMYK는 RGB를 잉크 네 가지로 바로 환산하는 공식 결과예요. 포토샵은 이렇게 하지 않아요. U.S. Web Coated(SWOP) 같은 특정 프로파일을 거치면서 잉크와 인쇄기, 종이까지 반영하거든요. 숫자가 다른 건 어느 쪽이 틀려서가 아니라 이 차이 때문이에요.

브라우저의 CMYK는 대략적인 감을 잡는 용도로 쓰세요. 잉크가 얼마나 많이 들어가는 색인지, 화면에서 쨍한 이 색이 인쇄에서 문제가 될지 정도는 충분히 가늠할 수 있어요. 실제 값은 인쇄소가 지정한 프로파일에 맞춰 편집 프로그램에서 확인하고 넘기는 게 맞아요.

한 화면에서 둘 다 하기

이미지 색상 추출 도구가 두 가지를 다 해요. JPEG·PNG·WebP·AVIF·GIF·BMP·SVG를 올리거나 클립보드에서 바로 붙여넣고, 커서를 올리면 11 × 11 픽셀 돋보기로 확인한 다음 클릭해서 색을 찍으면 돼요. 값은 화면에 보이는 미리보기가 아니라 원본 해상도에서 읽고, HEX·RGB·HSL·HSB·CMYK와 붙여넣기용 CSS 줄에 각각 복사 버튼이 붙어 있어요. 최근에 고른 색 여덟 개도 아래에 남아요.

팔레트는 이미지를 올리는 순간 알아서 만들어져요. 4개에서 16개 사이로 개수를 조절하고, HEX 전체를 한 번에 복사하거나 CSS 변수 묶음으로 가져갈 수 있어요. 거의 투명한 영역은 빼고 계산해서, 투명 PNG의 빈 배경이 색으로 잡히는 일도 없고요. 팔레트만 필요하다면 이미지 컬러 팔레트 추출 페이지가 같은 방식으로 팔레트를 앞세워 보여줘요. 둘 다 브라우저 안에서 파일을 읽기 때문에 업로드 자체가 없고, 고른 색도 그 탭을 벗어나지 않아요.