이미지 색상 추출 (온라인 스포이드)

이미지 색상 추출 사용 방법

1. 색을 알고 싶은 이미지를 끌어다 놓거나 눌러서 선택합니다. 캡처한 화면은 Ctrl+V로 바로 붙여 넣을 수도 있습니다.
2. 이미지 위에서 마우스를 움직이면 커서 아래 색이 실시간으로 표시됩니다. 원하는 지점을 누르면 색이 고정되고 기록에 쌓입니다.
3. HEX·RGB·HSL 버튼을 누르면 해당 형식의 색상 코드가 복사됩니다.
4. 아래 대표 색상에서 이미지 전체의 주요 색과 차지하는 비율을 확인합니다.

사진에서 색상 코드 찾는 방법

디지털 이미지는 작은 점(픽셀)으로 이루어지고, 각 픽셀은 빨강(R)·초록(G)·파랑(B) 세 가지 빛의 세기를 0~255 숫자로 가집니다. 이 도구는 누른 위치 픽셀의 RGB 값을 그대로 읽어 다음 형식으로 보여 줍니다.

사진은 같은 물체라도 빛과 압축 때문에 픽셀마다 색이 조금씩 다릅니다. 로고처럼 정확한 색이 필요하면 가장 넓고 평평하게 칠해진 부분을 고르세요. 다른 형식(CMYK 등)으로 바꾸려면 색상 코드 변환을 이용하세요.

이미지 대표 색상(팔레트) 추출 원리

대표 색상은 이미지 전체에서 고르게 뽑은 수천 개의 픽셀을 비슷한 색끼리 묶는 k-평균(k-means) 군집 방식으로 계산합니다. 묶음마다 평균 색을 구하고, 그 묶음이 이미지에서 차지하는 비율이 큰 순서대로 보여 줍니다. 투명한 부분은 계산에서 뺍니다.

대표 색상은 웹사이트나 발표 자료의 색 조합을 정할 때 좋은 출발점입니다. 비율이 가장 큰 색은 배경색, 두세 번째 색은 강조색으로 쓰면 사진과 잘 어울리는 디자인을 만들 수 있습니다. 개수를 늘리면 더 세밀한 색까지 나뉘어 나타납니다.

화면 캡처로 웹사이트·앱 색상 알아내기

1. 색을 알고 싶은 화면에서 윈도우는 Win + Shift + S, 맥은 Cmd + Shift + 4로 영역을 캡처합니다.
2. 이 페이지로 돌아와 Ctrl + V(맥은 Cmd + V)를 누르면 캡처 이미지가 바로 열립니다.
3. 원하는 버튼이나 글자 위를 눌러 색상 코드를 복사합니다.

모니터의 색 설정이나 다크 모드, 브라우저 확대에 따라 캡처한 색이 원본 디자인 값과 약간 다를 수 있습니다. 브랜드 색처럼 정확한 값이 필요하면 원본 디자인 파일이나 공식 가이드를 확인하세요.