색상 추출
사진을 올리고 원하는 지점을 클릭하면 색상 코드가 표시됩니다. CSS·디자인 툴에 바로 붙여 넣을 수 있습니다.
파일은 기기 밖으로 나가지 않습니다
색상을 뽑을 이미지를 놓으세요
또는 클릭하여 선택 — 픽셀을 클릭해 색 값을 확인합니다
컬러 피커는 이미지의 특정 픽셀에서 색 값을 읽어 HEX, RGB 등으로 보여 주는 도구입니다. 웹사이트 버튼색을 시안에 맞추거나, 브랜드 가이드에 없는 사진 속 톤을 참고할 때 유용합니다. 스포이드로 ‘감’이 아닌 숫자로 맞출 수 있습니다.
압축·조명 때문에 같은 면이라도 픽셀마다 색이 흔들립니다. 여러 지점을 찍어 평균적으로 가까운 값을 고르세요. 인쇄(CMYK)와 화면(RGB)은 색공간이 달라 보일 수 있으니, 인쇄 최종본은 별도 교정하세요.
이미지를 자른 뒤 뽑거나, 압축 전 원본에서 뽑으면 더 정확합니다.
사용 방법
- 이미지 업로드 — 색을 뽑을 시안·스크린샷·사진을 불러옵니다.
- 픽셀 클릭 — 스포이드 커서로 원하는 위치를 클릭합니다. 확대되면 더 정확합니다.
- 코드 확인 — HEX(#RRGGBB), RGB 값을 확인합니다.
- 복사·적용 — 코드를 복사해 CSS, Figma, 프레젠테이션에 붙여 넣습니다.
- 대비 점검 — 텍스트 색으로 쓸 경우 배경과의 명도 대비를 별도로 확인하세요.
활용 사례
- 웹·앱 UI 토큰 — 시안 이미지에서 브랜드 컬러를 추출해 디자인 토큰에 반영합니다.
- 경쟁 사이트 톤 참고 — 스크린샷에서 대략적인 팔레트를 파악합니다. 저작권·브랜드는 준수하세요.
- 썸네일·배너 제작 — 사진 주조색에 맞춰 오버레이·버튼 색을 고릅니다.
실무 팁
- 안티앨리어싱된 가장자리는 중간색이 섞입니다. 면 중앙을 찍으세요.
- 다크모드/라이트모드 각각 대비를 확인하세요.
- 색각 다양성을 고려해 색만으로 정보를 구분하지 마세요.
- HEX 대소문자는 보통 동일하게 취급됩니다.
자주 묻는 질문
어떤 형식을 주나요?
일반적으로 HEX와 RGB를 제공합니다. 화면 표시를 확인하세요.
HSL도 있나요?
UI에 있으면 함께 표시됩니다. 없으면 HEX를 변환기로 바꾸세요.
이미지가 업로드되나요?
가능하면 로컬에서 픽셀을 읽습니다.
정확한 브랜드 컬러인가요?
사진·압축본은 왜곡될 수 있습니다. 공식 가이드 값이 있으면 그것을 우선하세요.
투명 픽셀은?
알파가 있는 경우 RGB와 별도로 투명도를 확인해야 할 수 있습니다.
여러 색을 팔레트로?
지점을 여러 번 찍어 메모하거나, 디자인 툴의 팔레트 기능과 병행하세요.