1. 원본 이미지 불러오기
이미지를 선택하거나 끌어 놓거나 붙여 넣습니다. 큰 파일은 브라우저가 작업 공간에 맞게 줄이지만 샘플링에 쓰는 픽셀 관계는 유지합니다.
브라우저에서만 처리하는 비공개 색상 샘플러
이미지 색상 추출기: HEX, RGB, HSB 확인
이미지를 끌어 놓거나 선택하거나 붙여 넣은 다음 확인할 위치를 누르세요. Toon Tone이 선택한 픽셀을 복사 가능한 HEX, RGB, HSB로 변환하고 작은 작업용 팔레트로 모아 줍니다.
2026년 7월 21일 업데이트
이미지 색상 추출기
이 이미지 색상 추출기는 무엇을 하나요?
이 이미지 색상 추출기는 브라우저 캔버스에서 선택한 정확한 픽셀의 빨강, 초록, 파랑, 알파 데이터를 읽습니다. 같은 화면 픽셀을 여섯 자리 HEX, RGB, HSB로 표시하고 원본 좌표도 보여 줍니다. 서로 다른 색을 최대 다섯 개까지 저장해 라벨이 있는 팔레트로 내려받을 수 있습니다. 업로드하거나 붙여 넣은 파일은 현재 브라우저 탭 안에만 남으며 Toon Tone 서버로 전송되지 않습니다.
이미지에서 정확한 색상 선택
이미지에서 정확한 색상 선택
샘플 그림을 바로 사용하거나 JPG, PNG, WebP, GIF처럼 브라우저가 읽을 수 있는 이미지로 바꾸세요. 캔버스를 누르거나 드래그해 픽셀을 살펴볼 수 있습니다.
로컬 처리 — 이미지는 업로드되지 않음
여기에 이미지 놓기또는 기기에서 파일 선택
클립보드의 이미지를 붙여 넣을 수도 있습니다. · 브라우저가 읽을 수 있는 이미지 · 최대 12MB나의 5색 팔레트
나의 5색 팔레트
서로 다른 샘플을 저장하고 전체 값을 복사하거나 라벨이 있는 PNG로 내보내세요.
색을 선택한 뒤 여기에 추가하세요. 최대 다섯 색을 저장할 수 있습니다.
이미지 준비 완료. 원하는 곳을 눌러 픽셀을 읽으세요.
로컬 처리 — 이미지는 업로드되지 않음
이미지는 현재 브라우저 탭 안에만 있습니다
파일은 브라우저 이미지 API로 해석되고 로컬 캔버스에서 픽셀이 읽힙니다. 이 과정에는 이미지 업로드 엔드포인트, 계정, 클라우드 보관함, 백그라운드 저장이 없습니다. 탭을 닫거나 새로 고치면 작업 이미지와 팔레트가 사라집니다.
- 서버 이미지 업로드 없음
- 계정 없이 사용
- 팔레트 파일도 기기에서 생성
이미지에서 색상을 고르는 세 단계
신뢰할 수 있는 샘플은 분명한 원본 영역에서 시작해 다시 쓸 수 있는 코드 기록으로 끝납니다. 이미지, 픽셀, 결과를 한 흐름 안에서 확인하세요.
2. 알맞은 표면 선택하기
부드럽게 처리된 가장자리, 하이라이트, 그림자, 압축 블록을 피하고 넓고 평평한 안쪽을 고릅니다. 확대 격자에서 정확한 중앙 픽셀을 확인하세요.
3. 결과 복사하거나 저장하기
한 색의 HEX, RGB, HSB를 직접 복사하거나 의미 있는 여러 색을 5색 팔레트에 모아 라벨이 있는 참고 PNG로 내려받습니다.
다음 작업에 맞는 색상 형식 선택
세 형식은 같은 화면 픽셀을 나타내지만 각각 읽기 쉽고 편집하기 좋은 작업이 다릅니다.
| 형식 | 알맞은 용도 | 도구가 보여 주는 값 |
|---|---|---|
| HEX | CSS 토큰, 디자인 메모, 빠른 공유 | 여섯 자리 웹 색상 코드 |
| RGB | 채널 확인과 브라우저 그래픽 | 빨강, 초록, 파랑을 0~255로 표시 |
| HSB | 직관적인 편집과 Toon Tone 연습 | 색상 0~360°, 채도와 밝기 0~100% |
이미지 색상 추출기가 유용한 상황
원본, 목표 영역, 사용할 목적을 먼저 정하면 추출한 색을 더 정확하게 해석할 수 있습니다.
만화와 일러스트 색 연구
옷, 털, 소품, 배경의 평평한 영역에서 색을 읽고 관련 견본을 저장해 색상, 채도, 밝기의 차이를 봅니다. 화면 캡처 값은 공부용 참고이며 작품이나 브랜드의 공식 색상 규격이 아닙니다.
UI와 디자인 전달
목업이나 화면 캡처에서 픽셀을 읽고 HEX를 복사한 뒤 원본 파일과 함께 기록합니다. 브랜드나 제작물에서 정확한 재현이 필요하면 승인된 디자인 토큰을 우선 확인하세요.
색 기억 훈련
색 하나를 고른 다음 원본과 숫자를 숨기고 HSB 선택기나 Toon Tone으로 기억한 인상을 다시 만듭니다. 답을 확정한 뒤 저장한 견본과 비교하면 중간에 정답을 따라 고치는 일을 줄일 수 있습니다.
정확한 한 픽셀이 대표 색상인 것은 아닙니다
이미지는 픽셀 격자로 이루어져 있으므로 도구는 특정 좌표에 저장된 빨강, 초록, 파랑 값을 정확히 보고할 수 있습니다. 그러나 그 정밀함만으로 물체를 가장 잘 나타내는 위치를 결정할 수는 없습니다. 캐릭터 셔츠에는 기본색, 밝은 하이라이트, 어두운 그림자, 외곽선, 부드럽게 섞인 가장자리 픽셀이 함께 있습니다. 모두 실제 픽셀이지만 질문에 맞는 것은 일부뿐입니다. 먼저 목표 부위를 분명히 정하고 넓고 시각적으로 안정된 안쪽에서 색을 읽으세요.
표면에 질감, 조명, 그라데이션, 압축 흔적이 있다면 한 번의 측정으로 결론 내리지 말고 몇 곳을 비교하세요. 무작위로 많은 점을 누르기보다 기본색, 빛, 그림자, 강조색, 배경처럼 목적을 가진 소수의 샘플이 유용합니다. 5색 팔레트는 이런 짧은 비교를 위해 만들어졌습니다. 한 점이 아니라 지배적인 평균이 필요하다면 다른 계산입니다. 그 결과는 정확한 픽셀이 아니라 추출 팔레트나 평균 팔레트라고 구분해야 합니다.
확대경으로 가장자리와 혼합 픽셀 피하기
디지털 그림의 가장자리에는 앤티앨리어싱이 자주 사용됩니다. 보통 크기에서 곡선이 매끄럽게 보이도록 물체와 배경의 색이 이웃 픽셀에서 섞입니다. 이 전환 지점을 누르면 평평한 내부에는 없는 중간색을 얻을 수 있습니다. 확대 격자는 포인터 주변을 보여 주고 선택한 중앙 칸을 표시합니다. 외곽선, 반투명 테두리, 부드럽게 처리된 글자, 작은 반사광에서 벗어난 뒤 값을 저장할 수 있습니다.
표시된 이미지가 휴대전화나 노트북 너비에 맞게 축소되어도 마우스와 터치 위치는 캔버스 픽셀 좌표로 다시 계산됩니다. 키보드 사용자는 캔버스에 초점을 두고 화살표 키로 선택을 한 픽셀씩 움직일 수 있습니다. Shift를 누르면 더 크게 이동합니다. 표시되는 좌표는 해석된 작업 이미지 기준입니다. 제작 과정에서 원본 해상도의 좌표가 필요하다면 원본 파일도 보관하세요.
압축, 투명도, 색상 프로필이 샘플에 주는 영향
JPEG 압축은 대비가 큰 선 주변에 작은 블록이나 번짐을 만들 수 있어 그림이 평평해 보여도 이웃 픽셀 값이 달라집니다. PNG와 WebP에는 투명도가 들어갈 수 있으며 반투명 픽셀은 보통 배경과 합성된 뒤 사람에게 보입니다. 이 도구는 캔버스에 해석된 모습을 읽고 완전히 불투명하지 않을 때 알파 비율도 표시합니다. 손상된 가장자리에서 떨어진 곳을 고르고 결과를 다시 쓸 때는 원본 형식도 기록하세요.
브라우저 캔버스는 화면 표시 중심의 색상 작업 흐름입니다. 포함된 프로필, 광색역 원본, 운영체제 색상 관리, 모니터 보정, 화면 밝기, 주변 색이 보이는 결과에 영향을 줍니다. 해석된 픽셀에 코드가 정확해도 다른 기기, 인쇄물, 페인트, 상품, 공식 디자인 파일이 같은 색을 쓴다는 증거는 아닙니다. 정확한 제작 판단에서는 권위 있는 원본 자료와 문서화된 색 공간으로 돌아가 확인해야 합니다.
HEX와 RGB에서 HSB 편집 흐름으로 이동하기
HEX와 RGB는 웹 작업에 편리한 직접적인 채널 값을 보존합니다. HSB는 같은 표시 색을 색상, 채도, 밝기로 다시 정리합니다. 색상은 빨강이나 파랑 같은 큰 계열을, 채도는 선명함이나 차분함을, 밝기는 이 모델에서 가장 높은 채널 양을 설명합니다. 이미지 색상 추출기는 전달하기 쉬운 정수 HSB로 반올림하면서 해당 HEX와 RGB를 옆에 함께 표시하므로 변환 뒤에도 기준을 잃지 않습니다.
선택한 색을 의도적으로 바꾸려면 HSB 색상 선택기를 열고 한 번에 한 채널만 움직이세요. 원본은 팔레트에 남기고 새 HEX를 별도로 저장합니다. HSB 밝기는 사람이 느끼는 명도도 아니고 접근성 대비율도 아닙니다. 두 디지털 색의 시각적 차이를 수치로 비교하려면 보이는 견본과 Delta E 계산기를 사용하고, 글자 읽기 편의성을 판단할 때는 실제 전경색과 배경색에 필요한 대비 계산을 적용하세요.
로컬 처리로 불필요한 이미지 공유 줄이기
개인 화면 캡처에는 이름, 메시지, 공개 전 디자인처럼 찾는 색과 무관한 정보가 포함될 수 있습니다. 이 도구는 이미지를 서버로 보내지 않고 현재 탭에서 파일을 해석해 로컬 캔버스에 그립니다. 복사할 때 클립보드로 전달되는 것은 화면에 표시된 색상 코드뿐입니다. 팔레트 다운로드는 기기에서 새로운 라벨 PNG를 만들며 원본 이미지는 그 내보내기 파일에 포함되지 않습니다.
로컬 처리도 기본적인 기기 주의가 필요합니다. 화면을 볼 수 있는 사람은 열린 이미지를 볼 수 있고 브라우저 확장 프로그램에는 각자의 권한이 있습니다. 내려받은 팔레트 파일은 지울 때까지 기기에 남습니다. 탭을 닫거나 새로 고쳐 작업 상태를 지우고 확인할 권한이 없는 자료는 불러오지 마세요. 이 개인정보 설명은 Toon Tone 페이지의 코드 경로에 대한 것이며 운영체제, 확장 프로그램, 이후 공유하는 파일까지 보장하지 않습니다.
추출한 팔레트를 의도적인 색 기억 연습으로 바꾸기
효과적인 색 기억 연습은 관찰과 회상을 분리합니다. 의미 있는 한 영역에서 색을 읽고 HSB를 기록한 다음 이미지와 숫자를 숨기세요. 확인하기 전에 기억만으로 색을 다시 만듭니다. 먼저 색상, 다음 채도, 마지막 밝기를 비교하면 단순히 답이 틀려 보였다고 판단하는 대신 가장 큰 편향을 말로 설명할 수 있습니다. 나중에 다른 원본으로 반복해 숫자의 단기 기억이 시각 학습을 대신하지 않도록 하세요.
Toon Tone은 이 흐름을 캐릭터 색상 게임으로 이어 주지만 사용자가 불러온 이미지는 공개 문제로 바뀌거나 저장되지 않습니다. 이미지 색상 추출기는 사용 권한이 있는 자료의 관찰에, HSB 선택기는 통제된 수정에, Delta E는 저장한 두 디지털 견본 비교에, 게임은 참고 이미지를 숨긴 회상 연습에 사용할 수 있습니다. 각 도구가 답하는 질문을 좁게 유지하면 결과의 의미가 분명하고 다른 작업에도 다시 쓰기 쉽습니다.
추출한 색으로 다음 작업 이어 가기
이미지 색상 추출기 자주 묻는 질문
Toon Tone이 이미지를 업로드하나요?
아니요. 선택하거나 붙여 넣은 이미지는 현재 브라우저 탭에서 해석됩니다. 이 페이지에는 이미지 업로드 엔드포인트, 계정 보관함, 클라우드 저장 단계가 없습니다.
어떤 이미지 형식을 사용할 수 있나요?
현재 브라우저가 해석할 수 있는 형식을 사용할 수 있습니다. 보통 JPG, PNG, WebP, GIF 등이 해당합니다. 로컬 작업 공간을 원활하게 유지하기 위해 파일당 최대 12MB입니다.
가까운 곳을 누르면 색이 달라지는 이유는 무엇인가요?
이웃 픽셀에는 가장자리 혼합, 그림자, 빛, 질감, 투명도, 압축 노이즈가 있을 수 있습니다. 기본색을 찾을 때는 확대경으로 안정된 내부 영역을 선택하세요.
HEX와 RGB 값은 정확한가요?
선택한 해석된 캔버스 픽셀에는 정확합니다. 화면 캡처가 원본 디자인, 다른 프로필, 보정된 화면, 인쇄물, 실제 상품과 일치한다는 증거는 아닙니다.
한 이미지에서 팔레트를 만들 수 있나요?
네. 서로 다른 색을 최대 다섯 개 저장하고 HEX, RGB, HSB를 한꺼번에 복사하거나 라벨이 있는 PNG 팔레트로 내려받을 수 있습니다.
HSB와 HSL은 같은가요?
아닙니다. HSB는 일반적으로 HSV와 같은 모델이지만 HSL은 명도 축을 다르게 계산합니다. 도구 사이에서 값을 옮길 때 HEX나 RGB도 함께 기록하세요.