이미지 색상 코드 추출

이미지 색상 코드 추출 방법

색상 코드 추출은 이미지 속 한 지점의 색을 HEX·RGB 같은 숫자 코드로 읽어 내는 작업입니다. 그림 프로그램의 스포이드(eyedropper) 도구와 같은 기능으로, 로고·캡처 화면·사진에 쓰인 색을 그대로 가져와 디자인이나 문서에 다시 쓸 때 필요합니다. 이 도구는 이미지를 브라우저 캔버스에 그린 뒤 고른 위치의 픽셀 값을 읽습니다.

1. 색을 뽑을 이미지를 선택하거나 도구 영역에 끌어다 놓습니다.
2. 이미지 위에 마우스를 올리면 확대경이 따라다니며 주변 11×11픽셀을 크게 보여 줍니다. 휴대폰에서는 손가락을 댄 채 움직이면 손가락 위쪽에 확대경이 뜹니다.
3. 원하는 위치에서 클릭하거나 손가락을 떼면 그 색의 HEX·RGB·HSL 코드가 표시됩니다. 옆의 복사 버튼으로 바로 복사합니다.
4. 아래쪽 대표 색상에서 이미지 전체의 주요 색과 면적 비율을 확인합니다.

키보드로는 이미지를 Tab으로 선택한 뒤 화살표 키로 1픽셀씩, Shift와 함께 누르면 10픽셀씩 옮기고 Enter로 고릅니다. 마우스로 대략 찍은 뒤 화살표 키로 한 픽셀씩 맞추면 가는 선이나 작은 글자의 색도 정확히 고를 수 있습니다.

평균 범위는 몇 개의 픽셀을 평균할지 정합니다. 1×1은 딱 한 픽셀, 3×3과 5×5는 가운데 픽셀을 둘러싼 9개·25개 픽셀의 평균입니다. 로고·아이콘·캡처 화면처럼 단색 면이 뚜렷한 이미지는 1×1이 정확하고, JPG 사진처럼 픽셀마다 미세한 잡음이 있는 이미지는 3×3이 눈에 보이는 색에 더 가깝습니다. 반투명한 픽셀은 색을 어둡게 끌어내리지 않도록 불투명도에 비례해 평균에 반영합니다.

고른 색은 최근 기록에 16개까지 쌓이고, 다른 이미지를 열어도 남아 있어 두 이미지의 색을 번갈아 비교할 수 있습니다. JPG·PNG·WebP·GIF·BMP를 열 수 있고 AVIF는 브라우저가 지원하면 열립니다. 움직이는 GIF·WebP는 첫 장면의 색을 읽으므로 화면에 보이는 장면과 다를 수 있습니다. 아이폰 HEIC 사진이 열리지 않으면 HEIC JPG 변환으로 JPG를 만든 뒤 올리세요.

HEX·RGB·HSL 색상 코드 읽는 법

화면의 색은 빨강(R)·초록(G)·파랑(B) 빛의 세기를 섞어 만듭니다. 세 값을 어떤 형식으로 적느냐에 따라 표기가 나뉘며, 이 도구는 웹과 디자인 프로그램에서 가장 널리 쓰는 세 가지를 보여 줍니다.

HEX와 RGB는 같은 값을 진법만 바꿔 적은 것입니다. #1E90FF에서 1E는 10진수로 30, 90은 144, FF는 255이므로 rgb(30, 144, 255)와 똑같은 색입니다. 세 값이 모두 0이면 검정(#000000), 모두 255면 흰색(#FFFFFF), 세 값이 같으면 회색입니다.

HSL은 같은 색을 색상환의 각도(H), 선명한 정도(S), 밝기(L)로 바꿔 적습니다. 색상은 0°가 빨강, 120°가 초록, 240°가 파랑이고, 명도 50%에서 가장 선명하며 0%는 검정, 100%는 흰색입니다. 브랜드 색에서 명도만 올리거나 내려 버튼·배경용 색을 만들 때 편합니다. 이 도구는 HSL을 정수로 반올림해 보여 주므로 HSL 값을 다시 RGB로 바꾸면 채널마다 보통 1~2 정도 차이가 납니다. 정확한 값을 옮길 때는 HEX나 RGB를 쓰세요.

투명도가 있는 PNG·WebP에서는 불투명도(알파)도 함께 표시합니다. 반투명 픽셀은 HEX 뒤에 두 자리를 더 붙인 8자리 HEX(#1E90FF80)나 rgba(30, 144, 255, 0.5)로 적고, 완전히 투명한 픽셀은 색 정보가 없어 투명으로만 표시합니다.

추출한 색상 코드 쓰는 곳 — CSS·파워포인트·포토샵

• CSS·웹 — HEX, rgb(), hsl()을 그대로 붙여 넣을 수 있습니다. 예를 들어 color: #1E90FF;처럼 씁니다. 8자리 HEX는 CSS Color 4에서 추가된 표기라 아주 오래된 브라우저는 인식하지 못하므로, 반투명 색이 필요하면 rgba()가 가장 무난합니다.
• 파워포인트·워드·엑셀 — 글꼴 색이나 도형 채우기 목록에서 다른 색(다른 채우기 색)을 누르고 사용자 지정 탭으로 가면 색 모델 RGB에서 세 값을 입력할 수 있습니다. Microsoft 365 등 최신 버전에는 HEX 코드를 붙여 넣는 칸도 있습니다. 같은 창의 HSL은 0~255 눈금을 써서 이 도구의 HSL(각도·%)과 숫자가 다르므로 RGB나 HEX로 옮기세요.
• 포토샵 — 도구 패널의 전경색을 눌러 색상 피커를 열고 # 칸에 HEX 6자리를 붙여 넣습니다. 포토샵 색상 피커의 H·S·B는 HSL이 아니라 HSB 방식이라 이 도구의 HSL 숫자를 넣으면 다른 색이 됩니다.
• 피그마·캔바 등 디자인 도구 — 대부분 HEX 입력 칸이 있어 # 뒤 6자리만 붙여 넣으면 됩니다.

같은 색인데 코드가 조금 다른 이유

눈으로는 한 가지 색으로 보여도 픽셀 값은 자리마다 조금씩 다를 수 있습니다. 같은 로고를 찍었는데 코드가 한두 자리씩 다르게 나오는 이유는 대부분 다음 가운데 하나입니다.

• JPG 압축 — JPG는 8×8픽셀 블록 단위로 색을 근사해 저장하는 손실 압축 형식이고, 색 정보를 밝기보다 낮은 해상도로 저장하는 경우가 많습니다. 그래서 단색 면도 픽셀마다 값이 조금씩 흔들리고, 글자·경계 주변에는 얼룩이 생깁니다. 면의 가운데를 고르거나 3×3·5×5 평균을 쓰세요.
• 경계와 크기 조절 — 글자와 도형의 가장자리에는 배경색과 섞인 중간색 픽셀이 있습니다. 축소된 이미지나 썸네일도 주변 픽셀이 평균되어 색이 섞입니다.
• 색 프로필 — 아이폰 사진처럼 sRGB보다 넓은 Display P3 색 공간으로 저장된 이미지가 있습니다. 브라우저는 이미지를 캔버스에 그릴 때 파일에 든 색 프로필을 반영해 sRGB 값으로 바꾸고, 프로필이 없는 이미지는 sRGB로 간주합니다. 이 도구의 코드는 변환된 sRGB 값이라 P3 범위의 아주 진한 색은 sRGB 끝값으로 잘려 원본 편집 프로그램의 값과 다를 수 있습니다.
• 화면과 파일 — 모니터의 색 영역·밝기나 야간 모드는 눈에 보이는 색을 바꾸지만 파일 속 숫자는 바꾸지 않습니다. 반대로 화면을 캡처한 이미지나 화면에서 색 고르기로 고른 값은 운영체제와 모니터 설정을 거친 표시값이라 원본 파일의 값과 조금 다를 수 있습니다.
• 반투명 픽셀 — 캔버스는 반투명 픽셀을 알파를 곱한 값으로 다루기 때문에 되돌리는 과정에서 RGB가 1~2 정도 달라질 수 있습니다. HTML 표준도 이 변환이 손실을 낳을 수 있다고 적고 있습니다.
• 브라우저 추적 방지 — 일부 브라우저의 핑거프린팅 방지 설정은 캔버스에서 읽은 픽셀 값에 아주 작은 잡음을 섞습니다. 같은 자리를 다시 찍었는데 값이 1씩 달라진다면 이 설정 때문일 수 있습니다.

공식 브랜드 색이 필요하다면 이미지에서 뽑은 값보다 브랜드 가이드나 원본 디자인 파일(AI·PSD·SVG)에 적힌 코드가 우선입니다. 이미지에서 뽑은 값은 원본을 구할 수 없을 때 가장 가까운 근삿값으로 쓰면 됩니다.

대표 색상 팔레트 추출

이미지를 올리면 자주 쓰인 색 5·6·8개와 각 색이 차지하는 면적 비율을 계산합니다. 방식은 1982년 폴 헥버트(Paul Heckbert)가 제안한 메디안 컷(median cut) 색 양자화입니다. 모든 픽셀의 색을 빨강·초록·파랑 3차원 공간의 점으로 보고, 가장 넓게 퍼진 축을 기준으로 픽셀 수가 반씩 나뉘는 지점에서 상자를 둘로 자르는 과정을 원하는 개수가 될 때까지 반복합니다. 그다음 각 픽셀을 가장 가까운 대표색에 다시 배정하는 k-평균(k-means) 계산으로 대표색을 다듬습니다. 무작위 초깃값을 쓰지 않아 같은 이미지는 언제나 같은 팔레트가 나옵니다.

• 계산 속도를 위해 이미지를 긴 변 240픽셀 표본으로 줄여 계산하므로 비율은 근삿값입니다. 작은 글자나 아이콘처럼 면적이 아주 작은 색은 팔레트에 나오지 않을 수 있으니 확대경으로 직접 고르세요.
• 비율은 픽셀 수 기준이라 넓은 배경색이 맨 앞에 오고, 눈에 띄는 강조색은 뒤쪽에 있을 수 있습니다.
• 투명도가 절반 미만인 픽셀은 계산에서 빼고, 뺀 비율을 따로 표시합니다.

사진 분위기에 맞춘 발표 자료·카드뉴스 색 조합, 로고와 브랜드 이미지의 색 구성 파악, 인테리어·옷 사진의 배색 참고에 쓸 수 있습니다. 배경을 빼고 특정 부분의 색 구성만 보려면 사진 자르기로 그 부분만 잘라 다시 올리세요.

인쇄용 CMYK 값을 보여 주지 않는 이유

CMYK는 인쇄 잉크인 시안·마젠타·노랑·검정의 비율입니다. 같은 RGB 색이라도 어떤 용지와 인쇄 방식을 기준으로 하느냐, 즉 어떤 ICC 프로필(예: Coated FOGRA39, Japan Color 2001 Coated)로 변환하느냐에 따라 CMYK 값이 크게 달라집니다. 웹에서 흔히 보이는 단순 공식은 이 프로필을 반영하지 못해 실제 인쇄용 값과 차이가 크므로 이 도구는 CMYK를 표시하지 않습니다.

인쇄물에 쓸 색은 HEX나 RGB를 포토샵·일러스트레이터에 입력한 뒤 인쇄소가 안내하는 색상 설정으로 변환하세요. 화면의 RGB 색 가운데 선명한 파랑·초록·주황 등은 잉크로 재현할 수 있는 범위를 벗어나 인쇄하면 탁해질 수 있습니다.

화면에서 색 고르기와 개인정보

화면에서 색 고르기 버튼은 브라우저의 EyeDropper API를 씁니다. PC용 Chrome·Edge·Opera 같은 크로미움 브라우저(버전 95 이상)에서만 나타나며, 누르면 커서가 돋보기로 바뀌고 브라우저 창 밖의 다른 프로그램 화면에서도 색을 고를 수 있습니다. Esc를 누르면 취소됩니다. Firefox·Safari와 휴대폰 브라우저는 이 기능을 지원하지 않아 버튼이 보이지 않습니다(2026년 9월 기준). 이 버튼으로 고른 값은 화면에 표시된 색이라 이미지 파일의 정확한 값이 필요하면 이미지를 올려 고르세요.

이미지는 서버로 업로드되지 않습니다. 파일을 읽고 픽셀 값을 계산하는 과정이 모두 이 브라우저 안에서 이뤄지고, 고른 색 기록도 어디에도 저장하지 않아 탭을 닫으면 사라집니다. 사내 자료나 개인 사진의 색을 뽑을 때도 파일이 밖으로 나가지 않습니다.

자주 묻는 질문