사진에서 색상 코드 찾는 법: HEX·RGB 색상 추출 가이드

사진이나 스크린샷, 다른 회사 배너에서 딱 마음에 드는 파란색을 찾았는데, 발표 자료나 웹사이트, 인쇄 주문에 쓰려면 정확한 코드가 필요합니다. 색상 슬라이더로 비슷하게 맞추려 해도 잘 안 맞습니다. 이미지 색상 추출기는 클릭한 픽셀을 그대로 읽어 HEX, RGB, HSL 값을 보여주고 각각 복사 버튼을 달아 줍니다. 이미지는 어디에도 업로드되지 않습니다.

빠르게 고르기

이미지 색상 추출기를 열고 JPG, PNG, WebP, AVIF, HEIC 이미지를 올린 뒤 원하는 색을 클릭하세요.
디자인 툴이나 CSS에는 HEX(#1a73e8), 숫자 세 개를 묻는 앱에는 RGB, 더 밝거나 어두운 변형을 만들 때는 HSL을 복사하면 됩니다.
팔레트 영역에서는 이미지에 가장 많이 쓰인 색을 최대 8개까지, 각 색이 차지하는 비율과 함께 볼 수 있습니다.

HEX, RGB, HSL 중 어떤 코드를 써야 할까

세 가지 모두 같은 sRGB 색을 다른 방식으로 적은 것입니다.

HEX는 빨강, 초록, 파랑을 #BD55DA 같은 여섯 자리 코드로 묶어 적습니다. 두 자리씩 "0부터 ff(255)" 사이 값을 16진수로 쓴 것입니다(MDN, "hex-color"). 디자인 앱, 브랜드 가이드, 홈페이지 빌더 대부분이 이 형식을 씁니다.
RGB는 같은 세 값을 rgb(189 85 218)처럼 0~255 숫자로 적습니다(MDN, "rgb()"). 프레젠테이션이나 스프레드시트 앱에서 색을 이렇게 입력하라는 경우가 많습니다.
HSL은 색을 색상, 채도, 명도로 나타냅니다. 명도는 100%가 흰색, 0%가 검은색, 50%가 "보통"입니다(MDN, "hsl()"). 손으로 조정하기 가장 쉬운 형식입니다. 명도를 올리면 밝은 톤이, 내리면 어두운 톤이 되고 색상은 그대로 유지됩니다.

어떤 형식을 넣어야 할지 모르겠다면 HEX가 가장 무난합니다.

추출한 색상 하나를 HEX, RGB, HSL 세 가지 코드로 함께 보여주는 일러스트

이미지에서 색상 코드를 뽑는 방법

이미지 색상 추출기를 열고 이미지를 올립니다. JPG, PNG, WebP, AVIF, HEIC, HEIF 파일을 최대 50MB까지 쓸 수 있고 GIF는 지원하지 않습니다.
이미지 위로 포인터를 옮기면 11 × 11 픽셀 돋보기가 따라다닙니다. 작은 부분도 어느 픽셀을 고르는지 정확히 볼 수 있습니다.
원하는 색을 클릭하거나 탭합니다. 한 픽셀 단위로 맞추고 싶다면 이미지를 선택한 상태에서 방향키로 1픽셀씩(Shift를 누르면 10픽셀씩) 움직이고 Enter를 누르세요.
HEX, RGB, HSL 칸에서 필요한 값을 복사합니다. 가장 가까운 CSS 색상 이름도 함께 나오니, 색을 말로 설명해야 할 때 참고하면 됩니다.

추출한 색은 최근 사용한 색상에 최대 12개까지 남습니다. 내 브라우저에만 저장되므로, 이미지 한 장에서 브랜드 색 몇 개를 모아 두었다가 나중에 복사할 수 있습니다.

업로드는 없습니다. 이미지는 브라우저 안의 캔버스에서 읽히고 계정 없이 쓸 수 있습니다. 아주 큰 이미지는 추출이 매끄럽도록 작은 사본으로 보여주며 그럴 때는 화면에 안내가 표시됩니다.

사진 위의 돋보기와 추출한 색상, 그 아래 팔레트 색상 견본이 나열된 모습을 보여주는 일러스트

색 하나 대신 팔레트 전체 뽑기

픽셀 하나보다 사진이나 무드보드, 로고의 전체 색 구성이 필요할 때도 있습니다. 팔레트 영역은 비슷한 픽셀끼리 묶어 가장 많이 쓰인 색을 최대 8개까지, 각 색이 이미지에서 차지하는 비율과 함께 보여줍니다. 견본을 클릭하면 그 색의 코드가 위쪽 결과 영역에 나타납니다.

사진 여기저기를 클릭하며 "대표 색"을 찾는 것보다 빠르고 작은 반사광이나 노이즈 같은 튀는 픽셀에 흔들리지 않습니다.

화면 어디서든 색 추출하기

색이 이미지 파일이 아니라 웹사이트나 다른 앱 안에 있다면 몇 가지 방법이 있습니다.

컴퓨터의 크롬이나 엣지에서는 이미지 색상 추출기에 화면에서 추출 버튼이 나타납니다. EyeDropper API를 쓰는 기능이라 브라우저 창 밖을 포함해 화면의 색을 고를 수 있습니다(MDN, "EyeDropper API"). 이 API가 없는 브라우저에서는 버튼이 보이지 않습니다.
윈도우에서는 마이크로소프트의 무료 도구 PowerToys에 들어 있는 색 선택기로 화면 어디서든 색을 복사할 수 있습니다. 기본 단축키는 Win + Shift + C, 기본 복사 형식은 HEX입니다(Microsoft Learn, "Color Picker 유틸리티").
맥에서는 기본 앱인 Digital Color Meter가 포인터 아래 픽셀 값을 보여주고 Shift + Command + C로 색을 텍스트로 복사할 수 있습니다(Apple 지원, "Digital Color Meter 사용 설명서").
웹 개발자라면 크롬 개발자 도구의 색상 선택기 안에 있는 스포이드로 페이지나 화면 어디서든 색을 뽑을 수 있습니다(Chrome for Developers, "Inspect and debug CSS colors").

가장 간단한 방법은 스크린샷을 찍어 이미지 색상 추출기에 올리는 것입니다. 휴대폰을 포함해 어떤 기기에서든 됩니다.

추출한 색이 "진짜" 색과 다른 이유

사진에서 로고 색을 뽑았는데 공식 브랜드 색과 조금 다르다면, 도구가 잘못 읽은 게 아니라 대개 픽셀 자체가 다른 것입니다. 흔한 원인은 이렇습니다.

JPEG 압축. JPEG는 밝기보다 색 정보를 낮은 해상도로 저장해서 색이 갑자기 바뀌는 곳에서 화질 저하가 눈에 띌 수 있습니다(Wikipedia, "Chroma subsampling"). JPG 속 작은 글씨와 날카로운 경계는 색을 뽑기에 가장 나쁜 곳입니다.
경계의 안티앨리어싱. 부드러운 경계는 가장자리 픽셀을 배경색과 섞어서 그립니다(Wikipedia, "Spatial anti-aliasing"). 도형의 테두리는 피하고 색이 고른 한가운데에서 고르세요.
조명과 카메라 보정. 인쇄된 로고를 찍은 사진에는 잉크의 색 코드가 아니라 그 방의 조명이 담깁니다.
넓은 색 영역. 요즘 화면과 휴대폰 카메라 상당수는 Display P3를 쓰는데, 여기에는 sRGB에 없는 선명한 색이 들어 있습니다(WebKit, "Wide Gamut Color in CSS with Display-P3"). HEX와 RGB 코드는 sRGB 기준이라 아주 채도가 높은 색은 가장 가까운 sRGB 값으로 잘릴 수 있습니다. 크롬의 스포이드도 같은 방식으로 동작합니다.

공식 브랜드 색이 필요하다면 그 브랜드의 스타일 가이드나 원본 디자인 파일이 가장 정확합니다. 그런 자료가 없을 때 색상 추출기를 쓰면 됩니다.

그 색 위의 글자가 잘 읽히는지 확인하기

배경색을 정했다면 쓰기 전에 글자색과의 대비를 확인하세요. WCAG 2.2는 일반 텍스트에 최소 4.5:1, 큰 텍스트(18pt 이상 또는 굵은 14pt 이상)에 최소 3:1의 명암 대비를 요구합니다(W3C, "WCAG 2.2, Contrast (Minimum)"). 추출한 HEX 코드를 아무 대비 검사 도구에나 붙여 넣으면 바로 확인할 수 있습니다.

자주 묻는 질문: 이미지 색상 추출

사진 속 색의 HEX 코드는 어떻게 찾나요?

이미지 색상 추출기에 사진을 올리고 색을 클릭한 다음 HEX 칸의 값을 복사하면 됩니다. 돋보기로 확대해 경계에서 떨어진 고른 부분을 고르면 가장 정확합니다.

휴대폰에서도 이미지 색상 코드를 뽑을 수 있나요?

네. 이미지 색상 추출기는 모바일 브라우저에서도 작동합니다. 이미지를 탭해 색을 고르고 코드 옆 복사 버튼을 누르세요. 앱이나 웹사이트 속 색이 필요하면 먼저 스크린샷을 찍어 올리면 됩니다.

색을 추출할 때 이미지가 업로드되나요?

아니요. 이미지는 브라우저 안에서만 읽히고 최근 사용한 색상도 내 브라우저 저장소에만 남습니다. 서버로는 아무것도 보내지 않습니다.

지금 색상 코드 찾기

이미지 색상 추출기에 이미지를 올리면 몇 초 만에 정확한 HEX, RGB, HSL 값을 복사할 수 있습니다. 필요한 부분만 남기고 싶다면 이미지 자르기 도구로 먼저 잘라 내도 됩니다.