마음에 드는 색이 담긴 사진에서 그 색의 코드를 알고 싶을 때가 있습니다. 이 도구는 사진을 클릭하면 그 지점의 색을 HEX·RGB로 알려주고, 이미지 전체의 대표 색 팔레트도 함께 뽑아줍니다.
색 추출과 팔레트
사진을 올리면 자동으로 대표 색 6가지를 팔레트로 보여줍니다. 이미지에서 가장 많이 쓰인 색들이라, 디자인의 색 조합을 참고하기 좋습니다. 팔레트의 색을 누르면 HEX 코드가 복사됩니다.
특정 지점의 색이 궁금하면 사진의 그 부분을 클릭하세요. 클릭한 픽셀의 정확한 색이 HEX와 RGB로 표시되고, 복사 버튼으로 바로 가져올 수 있습니다. 추출한 코드는 색상 변환 도구에서 다른 형식으로 바꿀 수도 있습니다.
클릭한 색이 눈으로 본 색과 다르게 나올 때
사진 속 색은 생각보다 균일하지 않습니다. 파란 하늘도 픽셀 단위로 보면 수십 가지 파랑이 섞여 있고, JPG 압축 노이즈까지 더해져 바로 옆 픽셀끼리도 값이 다릅니다. 클릭할 때마다 코드가 조금씩 다르게 나온다면 그 때문입니다. 단색 영역이라면 가장자리보다 한가운데를 클릭하는 편이 의도한 색에 가깝습니다.
조명도 변수입니다. 같은 제품 사진이라도 촬영 조명에 따라 실제 브랜드 컬러보다 노랗거나 파랗게 기록됩니다. 사진에서 뽑은 색은 '그 사진 안에서의 색'이라는 점을 감안하고, 정확한 브랜드 컬러가 필요하면 공식 가이드라인의 코드와 비교해 보정하는 것이 안전합니다.
뽑은 색, 이렇게 써먹습니다
추출한 HEX 코드는 CSS·피그마·파워포인트 어디든 붙여넣어 쓸 수 있습니다. 대표 팔레트는 색 조합의 출발점으로 쓰기 좋습니다. 좋아하는 영화 포스터나 브랜드 화보에서 팔레트를 뽑아 보면, 잘 만든 색 조합이 어떤 비율로 구성되는지도 보입니다.
- 블로그·발표자료의 포인트 컬러를 사진 분위기에 맞추기
- 쇼핑몰 상세페이지 배경색을 제품 사진에서 뽑기
- 웹 디자인에서 참고 이미지의 색 조합 분석하기
- 뽑은 색의 글자 가독성은 색상 대비 검사 도구로 확인하기