이미지에서 색상 추출하는 방법 (HEX·RGB 스포이드)

레퍼런스 이미지나 디자인 시안의 특정 색상을 코드로 쓰려면 HEX 또는 RGB 값을 정확히 알아야 합니다. 색상 추출을 위해 Photoshop이나 별도 앱을 설치하거나, 이미지를 외부 사이트에 올리기엔 번거롭고 찜찜합니다. 이 글에서는 이미지를 브라우저에 끌어놓고 픽셀을 클릭하는 것만으로 HEX·RGB·HSL 색상값을 즉시 추출하는 방법을 정리합니다. 이미지는 서버로 전송되지 않습니다.

이런 분께 필요해요

• 디자인 시안·레퍼런스 이미지에서 특정 색상의 HEX 코드를 뽑아 CSS에 넣어야 할 때
• 브랜드 로고나 포스터에 쓰인 색상을 정확히 파악해야 할 때
• 사진·일러스트에서 마음에 드는 색상을 추출해 팔레트를 만들고 싶을 때
• Photoshop 스포이드 대신 브라우저에서 빠르게 색상 코드를 얻고 싶을 때

색상 추출하는 단계

1. 이미지 열기색상을 추출할 이미지를 화면에 드래그&드롭하거나 선택해 불러옵니다. 이미지는 서버로 전송되지 않습니다.
2. 돋보기로 위치 확인마우스를 이미지 위에 올리면 돋보기 미리보기가 나타납니다. 추출하려는 정확한 픽셀 위치를 확인합니다.
3. 클릭해 색 추출원하는 위치를 클릭하면 해당 픽셀의 색상이 추출되어 HEX·RGB·HSL 값이 즉시 표시됩니다. 최근 추출한 색상은 팔레트에 자동으로 쌓입니다.
4. HEX/RGB/HSL 복사필요한 색상 포맷을 선택해 복사하면 코드나 디자인 도구에 바로 붙여넣을 수 있습니다.

HEX · RGB · HSL, 어떤 포맷을 쓸까

같은 색상이라도 쓰임에 따라 편한 표기 방식이 다릅니다.

• HEX (#RRGGBB) — 웹·CSS에서 가장 많이 쓰입니다. 디자인 도구에서도 범용적으로 지원합니다.
• RGB (rgb(r, g, b)) — 빨강·초록·파랑 각 채널을 0~255로 표현. 프로그래밍·캔버스 처리에 자주 사용합니다.
• HSL (hsl(h, s%, l%)) — 색조·채도·밝기로 색상을 직관적으로 표현. CSS 변수로 테마 색상을 관리할 때 편합니다.

브라우저에서 처리되는 이유 — 보안

개인 사진, 미공개 디자인 시안, 업무 자료가 담긴 이미지를 외부 서버에 올리는 건 부담스러울 수 있습니다. 이 도구는 색상 추출 처리 전체를 이용자의 브라우저 안에서만 진행하므로, 이미지 데이터가 어디로도 전송되지 않습니다.

자주 묻는 질문