이미지 색상 추출 — 사진에서 HEX·RGB 색 코드 뽑기

이미지 색상 추출이란?

사진이나 디자인 시안에서 마음에 드는 색을 골라 HEX 코드(#2563EB), RGB, HSL 값으로 알려 주는 도구예요. 이미지를 클릭하거나 터치하면 그 픽셀의 색을 뽑고, 확대경으로 주변 픽셀을 키워 보여 줘서 정확한 지점을 고를 수 있어요. 이미지 전체에서 눈에 띄는 대표 색 5~8개를 자동 팔레트로 만들어 주기도 해요.

사용법

1. 이미지를 끌어다 놓거나 이미지 선택을 눌러요. 복사한 이미지는 Ctrl+V(맥은 ⌘V)로 붙여 넣어도 돼요.
2. 이미지 위를 움직이면 오른쪽 확대경에 주변 픽셀이 커져 보여요. 원하는 자리를 클릭하거나 터치해요.
3. 뽑은 색에서 HEX, RGB, HSL을 확인하고 복사를 눌러요.
4. 이미지를 클릭한 뒤 방향키로 한 픽셀씩, Shift+방향키로 10픽셀씩 커서를 옮겨 더 세밀하게 고를 수도 있어요.
5. 아래 대표 색 팔레트에서 색 개수를 5~8에서 고르고, 마음에 드는 색을 누르면 위의 값으로 가져와요.

계산 기준

• HEX: 각 채널을 두 자리 16진수로 써서 대문자로 보여 줘요. 예: R37 G99 B235는 #2563EB.
• HSL: 색상 0360도, 채도와 밝기 0100%를 정수로 반올림해요. 위 색은 hsl(221, 83%, 53%)예요.
• 팔레트: 투명도 50% 이상인 픽셀만 모아 k-means(k-means++ 초기화, 고정 시드, 최대 20회 반복)로 묶고 중심 색을 반올림해요. 픽셀 수가 많은 묶음부터 보여 주고 이미지에서 차지하는 비율(%)을 같이 표시해요.
• 다운샘플링: 팔레트 계산 전에 이미지를 1만 픽셀 안팎으로 줄여서 큰 사진도 빠르게 계산해요. 색을 섞는 보간 없이 픽셀을 골라 뽑아서 이미지에 없는 중간색이 팔레트에 끼지 않아요.
• 색 값: 브라우저가 이미지를 sRGB로 그린 픽셀 값을 읽어요. 이미지에 다른 색상 프로필이 들어 있으면 브라우저가 sRGB로 변환한 값이에요.

활용 예시

하고 싶은 일	방법
로고의 브랜드 색 확인	단색 부분을 클릭해 HEX 복사
사진 분위기에 맞는 배경색	팔레트에서 가장 큰 색 선택
한 픽셀 단위 점검	방향키로 이동, 확대경으로 확인