이미지 색상 추출기 — 클릭 컬러피킹·팔레트 추출 무료 도구

1. 주요 기능

2. 색상 피킹이란? — 디자이너의 필수 도구

색상 피킹(Color Picking)은 이미지나 화면에서 특정 픽셀의 정확한 색상값을 읽어내는 작업을 말합니다. 그래픽 디자인 소프트웨어에서 '스포이트(Eyedropper)' 도구라는 이름으로 널리 알려져 있으며, Photoshop, Figma, Illustrator 등 거의 모든 디자인 도구에서 기본 기능으로 제공됩니다.

실제 픽셀 색상 추출 원리 — Canvas getImageData API

웹 브라우저에서 이미지의 픽셀 색상을 읽으려면 HTML5 Canvas API의 getImageData() 메서드를 사용합니다. 이미지를 Canvas 요소에 그린 후, 클릭한 좌표의 픽셀 데이터를 배열로 반환받습니다. 배열의 각 원소는 R(빨강), G(초록), B(파랑), A(불투명도) 순서로 0~255 사이의 정수값을 가집니다.

중요한 점은 이미지가 화면에 축소/확대되어 표시되더라도, Canvas 내부 좌표계는 원본 이미지 해상도를 기준으로 합니다. 따라서 표시 크기와 실제 이미지 크기의 비율(scaleX, scaleY)을 계산해 클릭 좌표를 정확히 변환해야 원하는 픽셀의 색상을 얻을 수 있습니다.

화면 색상과 저장된 색상이 다르게 보이는 이유

같은 HEX 값이라도 다른 모니터에서 다르게 보일 수 있습니다. 그 이유는 다음과 같습니다.

• 모니터 캘리브레이션(Color Calibration): 각 디스플레이는 공장 출하 시 색상 특성이 다르며, 별도로 캘리브레이션하지 않으면 동일 색상값이 다르게 표현됩니다. 전문 디자인이나 인쇄 작업에서는 캘리브레이션된 모니터 사용을 권장합니다.
• 색 공간 차이 (sRGB vs AdobeRGB vs Display P3): sRGB는 웹 표준 색 공간으로 가장 넓게 사용됩니다. AdobeRGB는 sRGB보다 약 35% 더 넓은 색 영역을 포함하며 인쇄 업계에서 선호됩니다. 최신 기기는 Display P3 색 공간을 지원해 더 생생한 색상을 표현하기도 합니다. 이미지가 AdobeRGB로 저장되었는데 sRGB 환경에서 열면 색상이 다르게 보입니다.
• 감마 보정(Gamma Correction): 모니터의 밝기 곡선에 따라 같은 RGB 값도 실제 밝기가 달라 보일 수 있습니다.
• JPEG 색상 서브샘플링: JPEG 압축 시 색차 정보를 줄이는 크로마 서브샘플링(Chroma Subsampling)이 적용되어 원본과 미세한 색상 차이가 생길 수 있습니다.

이 도구는 브라우저가 표시하는 이미지의 실제 픽셀값을 그대로 읽어오므로, 브라우저가 색 관리를 적용한 결과를 반환합니다. 전문 인쇄 작업이라면 캘리브레이션된 환경에서의 검수를 추가로 권장합니다.

3. HEX·RGB·HSL 색상 코드 완전 가이드

디지털 색상을 표현하는 방법은 여러 가지가 있습니다. 각 방식은 사용 환경과 목적에 따라 장단점이 있으며, 같은 색상을 다른 형식으로 변환해 사용하는 일이 빈번합니다. 아래 표에서 주요 색상 형식을 한눈에 비교할 수 있습니다.

HEX — 웹 표준 16진수 색상 코드

HEX(헥사데시말) 코드는 #RRGGBB 형식으로 표현됩니다. 각각 2자리 16진수(0~F)가 Red, Green, Blue 채널을 나타냅니다. 예를 들어 #7aa2ff는 R=7A(122), G=A2(162), B=FF(255)입니다. 웹 CSS에서 가장 보편적으로 쓰이는 형식으로, #fff처럼 각 채널이 동일한 두 자리인 경우 3자리 단축 표기도 허용됩니다. 숫자 0으로만 이루어지면 검정(#000000), F로만 이루어지면 흰색(#ffffff)입니다.

RGB — 빛의 3원색 가산 혼합

RGB는 Red, Green, Blue 세 가지 빛의 원색을 혼합해 색상을 표현합니다. 각 채널은 0~255 사이의 정수값을 가집니다. 모두 0이면 빛이 없는 검정(0,0,0), 모두 255이면 세 원색이 합쳐진 흰색(255,255,255)이 됩니다. CSS에서는 rgb(122, 162, 255) 또는 rgba(122, 162, 255, 0.8)처럼 불투명도(alpha)를 추가할 수 있습니다. Python의 PIL/Pillow 라이브러리, OpenCV 등도 기본적으로 RGB(또는 BGR) 튜플을 사용합니다.

HSL — 인간 직관에 가까운 색상 표현

HSL은 Hue(색조), Saturation(채도), Lightness(밝기)의 약자입니다. H는 색상환에서의 각도(0°~360°)로, 0°=빨강, 120°=초록, 240°=파랑이며 360°에서 다시 빨강으로 돌아옵니다. S는 색의 선명함(0%=무채색 회색, 100%=순수 색상), L은 밝기(0%=검정, 50%=순색, 100%=흰색)입니다. HSL은 '이 색을 조금 더 밝게' 또는 '채도를 낮추어 파스텔 톤으로' 같은 직관적인 조작이 쉬워 CSS 색상 설계나 색상 조화(컬러 하모니) 계산에 많이 활용됩니다.

변환 공식

RGB → HEX 변환은 각 채널값을 16진수로 변환해 2자리로 맞추면 됩니다. RGB → HSL 변환의 수학적 과정은 다음과 같습니다.

1. R, G, B를 각각 255로 나눠 0~1 범위로 정규화합니다.
2. max = max(R, G, B), min = min(R, G, B), L = (max + min) / 2
3. max = min이면 무채색이므로 H = S = 0
4. 그 외에는 d = max - min이고, S = L > 0.5 ? d / (2 - max - min) : d / (max + min)
5. H는 max에 따라: R일 때 (G-B)/d, G일 때 (B-R)/d + 2, B일 때 (R-G)/d + 4로 계산 후 ×60°

4. 이미지에서 팔레트 추출하는 방법

이미지에서 대표 색상 팔레트를 뽑아내는 과정을 색상 양자화(Color Quantization)라고 합니다. 수백만 가지 색상을 소수의 대표 색상으로 줄이는 작업으로, 브랜드 컬러 추출, 이미지 압축, UI 테마 자동 생성 등에 활용됩니다.

미디언 컷(Median Cut) 알고리즘

미디언 컷은 가장 널리 쓰이는 색상 양자화 알고리즘입니다. RGB 3차원 색상 공간에서 전체 픽셀을 하나의 박스로 시작해, 가장 넓은 색상 범위를 가진 채널을 기준으로 중앙값(median)에서 이등분합니다. 이 과정을 원하는 색상 수의 박스가 생길 때까지 반복하고, 각 박스의 평균색을 대표 색상으로 사용합니다.

k-means 클러스터링

k-means는 통계 머신러닝 기반의 클러스터링 방법입니다. k개의 클러스터 중심을 임의로 초기화한 뒤, 각 픽셀을 가장 가까운 중심에 배정하고, 배정된 픽셀들의 평균으로 중심을 업데이트하는 과정을 수렴할 때까지 반복합니다. 미디언 컷보다 품질이 높지만 연산량이 많아 실시간 웹 처리에는 적합하지 않습니다.

이 도구의 간소화 방식

이 도구는 성능을 위해 간소화된 빈도 기반 양자화를 사용합니다. 이미지 픽셀을 8픽셀 간격으로 샘플링한 후, 각 픽셀 색상을 채널당 5비트(32단계)로 양자화하여 그룹화합니다. 가장 많이 등장하는 색상 그룹 순서로 8개를 선택해 팔레트를 구성합니다. 단순하지만 속도가 빠르고 이미지의 지배적 색상을 효과적으로 찾아냅니다.

브랜드 컬러 추출에 활용하기

로고 이미지나 브랜드 소재를 업로드하고 팔레트를 추출하면 해당 브랜드의 주요 색상을 HEX 코드로 빠르게 파악할 수 있습니다. 경쟁사 사이트의 스크린샷에서 색상을 분석하거나, 디자인 레퍼런스 이미지의 배색 구조를 파악하는 데 매우 유용합니다. 추출된 팔레트를 그대로 CSS 변수나 디자인 시스템에 활용할 수 있습니다.

5. 색상 코드 활용 사례 — CSS, 디자인 툴, 인쇄

추출한 색상 코드는 다양한 분야에서 바로 활용할 수 있습니다. 아래 표에서 분야별 사용 방법을 확인하세요.

6. 자주 묻는 질문