이미지 컬러 피커 이용 안내

참고 이미지·로고·스크린샷에서 정확한 색 코드가 필요할 때 씁니다. 클릭한 픽셀의 HEX·RGB·HSL 등을 바로 확인하고 스와치로 모아 복사할 수 있으며, 이미지는 기기 밖으로 나가지 않습니다.

브랜드 색을 뽑을 때는 로고의 ‘가장 평평한 단색 영역’을 클릭하세요. 그라데이션·그림자·안티앨리어싱 경계는 대표색이 아닌 중간값이 나오기 쉽습니다.

스와치에 3~6개만 모아도 배색 방향을 잡기 충분합니다. HEX를 복사해 CSS 변수나 디자인 툴 팔레트에 바로 붙여 넣고, 밝기만 조절할 일이 있으면 HSL 값도 함께 메모하세요.

사용법

이미지를 올리거나 URL로 불러온 뒤, 화면을 클릭하거나 스포이드로 원하는 픽셀 색을 뽑으세요.

HEX·RGB·HSL 형식으로 확인할 수 있고, 스와치에 모아 두었다가 한꺼번에 복사할 수도 있습니다.

이런 때 쓰면 좋습니다

• 브랜드 로고에서 대표색을 CSS·디자인 툴에 옮길 때
• 참고 사진의 배색을 견본으로 모아 팔레트를 만들 때
• 화면 캡처 후 버튼·배경색 코드를 바로 확인할 때

활용 팁

• 가는 선·작은 아이콘은 확대한 뒤 픽셀 단위로 찍으면 정확합니다.
• 사진 압축·그림자 때문에 같은 물체라도 지점마다 값이 달라질 수 있으니 여러 점을 비교하세요.
• 외부 URL이 CORS로 막히면 파일을 내려받아 업로드하세요.

주의할 점

• 모니터 보정·브라우저 색 공간에 따라 체감 색과 코드가 조금 다를 수 있습니다.
• CMYK 값은 참고용 변환이며, 인쇄 최종본은 전용 프로그램에서 프로파일을 적용하세요.

자주 묻는 질문

어떤 코드를 쓰면 되나요? 웹·CSS는 HEX 또는 RGB가 일반적입니다. 밝기만 살짝 바꿀 때는 HSL이 다루기 쉽습니다.

견본이 사라졌어요. 스와치는 페이지를 새로고침하면 초기화됩니다. 필요한 코드는 복사해 따로 저장하세요.

관련 가이드

• 컬러 피커 가이드
• 이미지 자르기·회전 가이드
• 이미지 형식 변환 가이드