이미지 색상 추출 — 설정과 품질

입력·출력 예제

어디를 클릭할지와 무엇을 복사할지가 전부예요. 디자인 도구와 CSS에는 HEX, 채널별로 쓰려면 rgb를 쓰세요.

HEX는 항상 대문자 여섯 자리이고, 예를 들어 #6D28D9는 rgb(109, 40, 217)과 같아요. CSS 사용자 지정 속성이나 디자인 도구에 붙일 때는 HEX를, 나중에 rgba로 투명도를 더할 때는 RGB 텍스트를 복사하세요. 값마다 복사 버튼이 따로 있고 복사되면 체크 표시가 1초쯤 나타나요.

상자 사진에 맞춰 라벨 색을 정하는 패키지 디자이너라면, 같은 색 영역에서 세 곳에서 다섯 곳을 클릭해 비교하세요. PNG에서 채널당 1~2 정도 차이는 정상이고, 10 이상 차이가 나면 그라데이션이거나 심하게 압축된 JPG예요.

자주 하는 실수는 그림자나 하이라이트 부분을 한 번 클릭해 브랜드 색으로 확정하는 거예요. 평평한 영역의 중간 톤을 고르고, 그라데이션이라면 평균 하나 대신 시작과 끝 색을 따로 기록하세요.

장단점을 말하면, 큰 이미지는 클릭 위치를 정밀하게 잡을 수 있고 무손실 PNG는 매번 같은 숫자를 줘요. 작은 JPG는 용량은 아끼지만 값이 몇 단위 흔들려요. 중요한 승인 단계에서는 소유자에게 공식 HEX를 받고, 선택기는 확인용으로만 쓰세요.

Pixel selected in an image

HEX and RGB values

이 도구는 눈에 보이는 색이 아니라 픽셀의 정확한 값을 알려 주므로, 조명이나 모니터 보정은 숫자에 영향을 주지 않아요.