이미지 색상 추출기이란?

이미지를 클릭해 정확한 색상 값을 추출하세요. 팔레트는 이미지의 주요 색상으로 즉시 채워지며, 돋보기로 원하는 픽셀을 정확히 짚을 수 있고, 각 색상은 HEX, RGB, HSL, HSV, CMYK와 가장 가까운 색상 이름까지 함께 보여줍니다. 선택한 색상은 팔레트에 저장하고 내보낼 수 있습니다.

이미지를 불러오면 도구가 그 안에서 가장 많이 쓰인 6가지 색을 골라 곧바로 팔레트에 넣어 주므로, 클릭하기 전부터 출발점이 되는 색이 갖춰집니다. 확대 루페가 커서 아래의 개별 픽셀을 보여 주어, 안티에일리어싱된 이웃이 아니라 원하는 톤을 정확히 짚기 쉽습니다. 클릭한 색은 각각 HEX, RGB, HSL, HSV, CMYK 값과 가장 가까운 CSS 명명 색을 표시하고 팔레트에 더해집니다. 이 팔레트는 HEX 목록으로 복사하거나 JSON 또는 CSS 변수로 내보낼 수 있습니다. 또한 일반적인 색맹 필터를 통과한 이미지를 보여 주는 시각 미리보기가 있어, 작업하면서 접근성을 점검할 수 있습니다.

사용 방법

1. 1단계 — PNG, JPEG, WebP, GIF 등 이미지를 업로드합니다. 이미지는 줌 루페가 있는 인터랙티브 캔버스에 로드됩니다.
2. 2단계 — 이미지의 원하는 위치를 클릭해 색상을 선택합니다. 루페가 커서 아래 영역을 확대해 정확한 선택을 도와줍니다.
3. 3단계 — HEX, RGB, HSL, HSV, CMYK 중 어떤 값이든 복사할 수 있고, 색상 견본 아래에는 가장 가까운 색 이름이 표시됩니다. 클릭한 색과 자동 감지된 여섯 가지 시작 색이 함께 팔레트에 남아 한 번에 내보낼 수 있습니다.

사용 시기

• 스크린샷이나 시안 렌더에서 브랜드 컬러를 정확히 추출하기.
• 참고 사진을 기반으로 디자인 프로젝트용 컬러 팔레트 만들기.
• 경쟁사 로고나 메인 비주얼에 쓰인 정확한 색 값을 파악하기.

결과

디자이너가 산악 호수의 정확한 청록색을 추출하기 위해 자연 사진을 업로드합니다. 물 위를 클릭해 #2E8B8C를 얻고, 같은 사진에서 추출한 세 가지 다른 색상과 함께 팔레트에 추가합니다.

자주 묻는 질문

추출한 색이 Photoshop에서 보는 값과 살짝 다른 이유는 무엇인가요?

대부분의 브라우저는 이미지를 불러올 때 sRGB로 변환합니다. 원본이 Adobe RGB나 Display P3로 태깅되어 있다면 여기서 얻는 값은 그에 대응하는 sRGB 값입니다. 완전히 일치시키려면 원본을 sRGB로 먼저 내보낸 뒤 업로드하세요.

루페가 보여주는 건 픽셀 하나인가요, 영역의 평균인가요?

루페가 샘플링하는 픽셀은 십자 바로 아래의 단 하나이고, 주변 픽셀은 위치 파악을 돕는 시각 자료일 뿐입니다. 루페 안에서 클릭하면 해당 픽셀 값이 고정되어 가장자리의 안티앨리어싱에 속지 않게 됩니다.

투명 영역이 있는 PNG에서도 색을 뽑을 수 있나요?

가능합니다. 투명 픽셀은 본래의 RGB 값을 반환하고 알파는 별도로 표시됩니다. 완전 투명한 지점을 클릭하면 캔버스 배경색(기본 흰색)이 잡히므로, 정확한 값을 얻으려면 불투명한 영역을 클릭하세요.

HEX, RGB, HSL, HSV, CMYK는 어떻게 다르고 무엇을 써야 하나요?

HEX(#2E8B8C)는 CSS와 디자인 도구에서 쓰는 가장 짧은 표기입니다. RGB는 0~255 사이의 세 채널 값을 직접 보여주어, 코드가 원시 값을 필요로 할 때 유용합니다. HSL은 색상·채도·명도를 다루며, 색을 조금 더 밝게 하거나 채도를 높이고 싶을 때 직관적입니다. HSV는 HSL과 비슷하지만 명도 대신 value(체감 밝기)를 사용하며 대부분의 디자인 소프트웨어 색상 선택기가 선호하는 형식입니다. CMYK는 인쇄용 4채널 퍼센트로, 인쇄소나 인쇄 디자이너에게 전달할 때 필요한 형식입니다.

한 번에 여러 색을 뽑을 수 있나요?

이미지를 올릴 때마다 팔레트에는 그 이미지의 주요 색 6가지가 미리 채워지고, 이후 클릭할 때마다 새 색이 세트에 추가됩니다. 팔레트 패널은 추출한 모든 색을 보여 주며, 원하는 견본을 복사하거나, 모든 HEX 코드를 한 번에 복사하거나, 개별 항목을 삭제하거나, 전체 세트를 JSON 파일이나 바로 붙여넣을 수 있는 CSS 사용자 정의 속성으로 내보낼 수 있습니다.

관련 도구