서버전송 없음 · 브라우저 처리

이미지 색상 추출

이미지를 클릭해 해당 픽셀의 HEX·RGB 코드를 뽑아 복사해요.

이미지 선택 후 클릭

즐겨찾기하면 홈에서 바로 찾을 수 있어요

이럴 때 쓰세요

디자인 시안에서 브랜드 색 HEX 추출

로고 이미지의 주 색상 코드 확인

스크린샷에서 특정 픽셀 색 뽑기

이렇게 사용하세요

11단계이미지 선택 후 클릭에서 파일을 고르거나 끌어다 놓으세요

22단계버튼을 누르면 바로 처리돼요

33단계결과를 내려받거나 공유 버튼으로 바로 보낼 수 있어요

결과가 예상과 다를 때

파일이 열리지 않아요

지원하는 형식인지 확인해 주세요. 암호가 걸린 파일은 암호를 푼 뒤 다시 시도하면 돼요.

결과가 마음에 안 들어요

원본은 그대로예요. 옵션이나 프리셋을 바꿔 다시 시도할 수 있어요.

자주 하는 실수

화면 캡처를 JPEG로 저장한 뒤 뽑으면 색이 번집니다. 무손실 PNG나 원본 파일에서 샘플링해야 원본 값에 가깝습니다.
이미지에 ICC 프로필이 있으면 표시 값이 달라집니다. 화면에 보이는 색이 파일에 저장된 색은 아닐 수 있어요.
확대한 상태에서 클릭하면 좌표가 어긋납니다. 100% 배율에서 보고 고른 뒤 확대된 픽셀을 확인하세요.
선택한 값 하나만 믿지 마세요. 텍스트·아이콘·배경 세 곳에서 뽑아 표본 팔레트를 만드는 편이 정확합니다.

계산 근거

이미지 색 추출은 파일에 저장된 픽셀의 R, G, B 값을 읽어 16진수 표기로 바꾸는 과정입니다. 각 채널은 0~255 범위이고 표기는 #RRGGBB로 두 자리씩 씁니다. 손실 압축(JPEG) 이미지는 블록마다 색이 어긋나 원본 값과 다를 수 있습니다.

실제로 계산해 보면

RGB(16, 163, 219)를 HEX로 바꾸면?

16 = 0x10, 163 = 0xA3, 219 = 0xDB. 두 자리씩 붙이면 #10A3DB예요.

반대색이 필요하면 어떻게 구하나요?

채널마다 255에서 원래 값을 빼면 됩니다. #10A3DB의 반대는 R 255−16 = 239(EF), G 255−163 = 92(5C), B 255−219 = 36(24). 결과는 #EF5C24예요.

투명도가 있는 픽셀은 어떻게 표시하나요?

알파 채널은 6자리 HEX에 포함되지 않습니다. 8자리 #RRGGBBAA로 표기해야 하며, 완전 투명 픽셀은 RGB 값이 0으로 나와 원래 색을 알 수 없어요.

더 궁금한 것

브라우저 개발자 도구 스포이드와 값이 다른 이유는?

브라우저는 화면에 표시된 색, 즉 색상 관리 적용 후 값을 줍니다. 이미지에 저장된 값과 다를 수 있으니 코드를 맞출 때는 이미지 파일에서 직접 뽑은 값을 쓰세요.

브랜드 컬러 세트로 정리하려면 어떻게 하나요?

원본 이미지에서 큰 면적을 차지하는 색을 세어 빈도가 높은 순으로 고릅니다. 한두 개만 뽑지 말고 텍스트·아이콘·배경에서 각각 3~4개씩 뽑아 우선순위를 정하세요.

얇은 글자나 경계가 뭉개지는데 어떻게 하나요?

선형 보간으로 확대된 픽셀은 여러 색의 가중 평균이라 중간색으로 나옵니다. 손실 압축 원본이면 PNG로 다시 저장하고, 그래도 번지면 폰트를 조금 굵게 바꿔서 다시 추출하세요.

알아둘 경계값

너비가 900px를 넘는 이미지는 축소 표시되지만 색상은 축소된 픽셀 기준이에요. 경계 색상은 원본과 다를 수 있어요.
HEX 코드는 대문자로 표시돼요. 소문자로 통일된 코드 체계에서는 변환이 필요해요.
클릭 좌표는 표시 크기에 맞춰 환산되지만 브라우저 확대 배율에서는 1px씩 어긋날 수 있어요.
복사 버튼은 결과 표시 후에 나타나므로 클릭 전에는 복사할 수 없어요.
파일을 바꾸면 이전 결과는 그대로 남아요. 새 이미지 클릭 전에는 이전 색상이 표시돼요.
테두리와 그라데이션 부분은 클릭 위치 1px 차이로 코드가 달라져요. 같은 색도 여러 번 클릭해 확인하세요.

결과를 믿기 전 확인 목록

가능하면 원본 PNG로 색을 추출했는지 확인하세요.
단색 영역 중앙을 클릭했는지 다시 확인하세요.
표시된 HEX와 RGB가 서로 맞는지 확인하세요.
추출한 색과 배경색 조합의 명암비를 확인하세요.
추출한 색을 실제 화면에 적용해 보았는지 확인하세요.
여러 지점에서 뽑아 대표색을 정했는지 확인하세요.
다크모드에서의 색감을 별도로 미리 확인하세요.
인쇄용 색상과 화면용 색상이 다른지 확인하세요.
코드 복사 후 붙여넣기가 되었는지 확인하세요.

자주 묻는 질문

정확한가요?

원본 픽셀 값을 그대로 읽어 정확합니다. 압축 이미지는 경계가 번질 수 있습니다.

JPG에서 색이 뭉개지는데요

JPG는 손실 압축이라 경계가 번집니다. 정확한 값이 필요하면 PNG 원본을 쓰세요.