이미지 색 뽑기

이미지 색 뽑기 사용법

이미지에서 색을 알아내는 도구입니다. 두 가지 일을 합니다. 하나는 이미지의 한 점을 찍어 그 자리의 정확한 색 값을 보는 것이고, 다른 하나는 이미지 전체에서 많이 쓰인 색을 몇 개로 추려 팔레트로 만드는 것입니다. 로고 파일의 색 코드를 알아낼 때, 사진과 어울리는 배경 색을 고를 때, 참고 이미지의 색 조합을 내 디자인에 옮길 때 씁니다.

점 찍어 색 확인하기

1. 이미지를 끌어다 놓거나 칸을 눌러 고릅니다. 캡처한 화면은 Ctrl+V로 붙여 넣습니다. 처음이라면 예시 이미지로 해 보기를 누르세요.
2. 이미지 위에서 마우스를 움직이면 오른쪽 돋보기에 그 둘레 13×13 픽셀이 크게 보이고, 가운데 네모 칸의 색 값(HEX, RGB, HSL)과 좌표가 아래에 나옵니다.
3. 원하는 곳을 누르면 찍어 담은 색 표에 추가됩니다. 최근 30개까지 담기며 줄마다 HEX 복사, RGB 복사 버튼이 있습니다.
4. 담은 색 HEX 모두 복사로 한꺼번에 가져갑니다.

휴대폰에서는 이미지를 누른 채 손가락을 움직이면 돋보기가 따라오고, 손을 떼는 자리의 색이 담깁니다. 키보드로는 이미지를 한 번 누른 뒤 방향키로 한 픽셀씩(Shift와 함께 누르면 10픽셀씩) 움직이고 Enter로 담습니다. 가는 선이나 작은 글자의 색처럼 마우스로 맞추기 어려운 곳을 찍을 때 편합니다.

주요 색 팔레트 뽑기

이미지를 넣으면 아래 주요 색 팔레트에 색 띠가 바로 나옵니다. 칸의 너비는 그 색이 차지하는 넓이에 비례하고, 칸마다 HEX 값과 비율이 적혀 있습니다. 칸을 누르면 HEX 값이 복사됩니다.

예시 이미지(남색 하늘에서 주황빛으로 이어지는 노을과 짙은 청록 산)로 색 수 6개를 뽑으면 하늘의 남색 계열, 노을의 주황과 노랑 계열, 산의 짙은 청록 계열이 나뉘어 나옵니다. 색 수를 3으로 줄이면 이 세 덩어리가 각각 한 색으로 합쳐지는 것을 볼 수 있습니다.

내보내기

코드 복사와 코드 파일 저장으로 가져갑니다. 팔레트를 PNG로 저장은 색 칸과 HEX 값이 적힌 가로 띠 이미지를 만들어 주므로 기획서나 무드 보드에 붙이기 좋습니다.

여러 장을 한 번에

이미지를 여러 장 넣으면 위쪽에 작은 그림이 나란히 나오고, 누르는 장이 아래 작업 화면에 뜹니다. 모든 이미지의 팔레트 CSV 저장을 누르면 장마다 뽑은 팔레트를 이미지 이름, 순서, HEX, R, G, B, 비율 열로 정리한 파일 하나를 받습니다. 상품 사진 수십 장의 대표 색을 표로 만들 때 씁니다.

팔레트를 뽑는 방법

이미지를 긴 변 150픽셀로 줄인 뒤 모든 픽셀의 색을 빨강, 초록, 파랑 세 축의 공간에 놓습니다. 색이 가장 넓게 퍼진 묶음을 가운데에서 둘로 나누는 일을 정한 색 수가 될 때까지 되풀이하고(중앙값 자르기), 묶음마다 평균 색을 냅니다. 그래서 팔레트의 색은 비슷한 색 무리의 평균이며, 비율은 그 무리에 든 픽셀의 몫입니다. 투명한 픽셀은 계산에서 뺍니다.

알아 둘 점

• 긴 변이 4096픽셀을 넘는 이미지는 그 크기로 줄여서 엽니다. 이때 좌표는 줄인 이미지 기준입니다.
• 사진의 색은 조명에 따라 달라집니다. 사진 속 제품의 색이 그 제품의 공식 색 값과 같다고 볼 수 없습니다. 브랜드 색은 브랜드 안내서의 값을 쓰세요.
• 움직이는 GIF는 첫 장면만 읽습니다.
• 찍어서 얻은 색이 글자 색으로 쓰기에 충분히 진한지는 색상 변환 도구의 명도 대비 검사에서 확인할 수 있습니다.