사진 속 색 코드 스포이드

디자인 시안·캡처·로고 그림에서 정확한 색 코드가 필요할 때 쓰세요. 돋보기를 보며 원하는 픽셀을 정확히 고를 수 있어요.

파일은 서버로 전송되지 않고 내 기기에서만 처리돼요

사진을 놓거나 눌러서 고르세요JPG · PNG · WEBP · GIF · HEIC · Ctrl+V로 캡처 붙여넣기

원하는 픽셀의 색을 정확히 골라요

디자인 시안이나 캡처 화면의 버튼 색, 로고 색을 똑같이 쓰려면 정확한 색 코드가 필요해요. 사진을 넣고 원하는 곳 위에 손가락이나 마우스를 올리면 그 자리를 12배로 키운 돋보기가 따라다니고, 누르면 색이 골라져요. 키보드로는 사진을 선택한 뒤 방향키로 1px씩(Shift를 누르면 10px씩) 옮기고 Enter로 골라요.

보여 주는 값

HEX·RGB — 웹·디자인 프로그램에 그대로 붙여 넣는 값이에요. 반투명한 곳은 알파 값까지 붙여요.
HSL·HSV — 색조(0~360°), 채도, 밝기로 나눈 값이라 ‘조금 더 밝게’ 같은 조정을 할 때 편해요.
CMYK — RGB에서 단순 공식으로 바꾼 값이에요. 실제 인쇄 색은 인쇄소의 색 프로필에 따라 달라서 참고용이에요.

평균으로 고르기

사진은 바로 옆 픽셀끼리도 잡티 때문에 색이 조금씩 달라요. ‘3×3 평균’은 누른 곳 둘레 9픽셀의 평균을 써서 그 부분의 대표 색에 가깝게 골라요. 로고·캡처처럼 색이 고른 그림은 ‘1픽셀 그대로’가 정확해요.

모은 색 저장

고른 색은 최대 30개까지 아래에 쌓이고, 이 브라우저에 기억돼요. CSS 변수(:root), HEX 목록, JSON, GIMP·Inkscape·Krita에서 불러오는 GPL 팔레트로 저장할 수 있어요. 색 칩을 누르면 그 색 코드가 복사돼요. 아주 큰 사진은 긴 변 4096px로 줄여서 읽어요.

참고한 자료

자주 묻는 질문

화면에 보이는 색과 디자인 프로그램에서 고른 색이 조금 달라요.

JPG는 압축 때문에 색이 살짝 바뀌고, 사진에 들어 있는 색 프로필에 따라 브라우저가 색을 바꿔 그릴 수 있어요. 원본 PNG 캡처로 고르면 가장 정확해요.

사진에서 많이 쓰인 대표 색을 자동으로 뽑을 수 있나요?

색상 팔레트 만들기의 ‘사진에서 주요 색 뽑기’를 쓰세요.

파일이 서버로 올라가나요?

아니요. 이 기기 브라우저 안에서만 처리해요.