이미지 색상 추출 — 입력 준비

입력·출력 예제

정확한 픽셀 색을 얻으려면 화면 캡처가 아닌 원본 이미지 파일을 쓰고, 가장자리나 그라데이션 대신 색이 고른 평평한 영역을 클릭하세요.

Chatcument는 정확히 한 픽셀만 읽어요. 이미지를 클릭하면 포인터 아래의 픽셀을 이미지 원래 해상도로 읽어 대문자 HEX 코드와 rgb(r, g, b) 값으로 보여 줘요. 주변을 평균내지 않기 때문에 그 픽셀에 섞인 노이즈나 안티앨리어싱이 그대로 숫자에 들어가요.

웹 디자이너가 고객이 보내 준 PNG 로고에서 브랜드 파랑을 뽑는 상황을 떠올려 보세요. 글자 테두리는 배경과 섞인 색이 나오니, 가장 큰 글자나 도형의 한가운데 채워진 부분을 클릭하는 게 안전해요.

흔한 실수는 야간 모드나 색 필터, 다른 모니터 프로파일로 찍은 캡처에서 색을 뽑는 거예요. 이미 모든 색이 바뀌어 있어요. 완전히 투명한 영역을 클릭하는 것도 실수예요. 그 자리에서는 캔버스가 rgb(0, 0, 0)을 돌려주는데 원하던 색이 아니에요. 보이는 불투명 픽셀을 고르세요.

시작 전에 세 가지를 확인하세요. 원본 내보내기 파일인지, 심하게 압축된 JPG가 아닌 PNG·WebP나 고화질 JPG인지, 클릭하려는 영역이 이웃 색을 건드리지 않을 만큼 큰지요. 그리고 같은 평평한 영역에서 두 곳을 클릭해 HEX가 같게 나오는지 확인해 보세요.

Pixel selected in an image

HEX and RGB values

값은 브라우저가 디코딩한 이미지에서 읽기 때문에, 특이한 색상 프로파일이 내장된 파일은 디자인 도구와 조금 다를 수 있어요.