이미지 색상 추출

사용 방법

1. 사진·로고·스크린샷을 끌어놓거나 파일을 선택하고, Ctrl 또는 ⌘와 V로 붙여넣습니다.
2. 이미지에서 색을 알고 싶은 픽셀을 클릭하거나 터치합니다.
3. 이미지에 포커스를 둔 뒤 방향키로 원본 픽셀 1칸, Shift와 방향키로 10칸씩 이동합니다.
4. HEX·RGB·HSL 값을 복사하고, 필요하면 자동 추출한 팔레트를 CSS 변수로 한 번에 복사합니다.

선택한 색상은 축소 미리보기가 아닌 원본 픽셀에서 읽습니다

화면의 미리보기는 원본보다 작게 보일 수 있지만, 클릭 위치를 원본 이미지 좌표로 다시 계산한 뒤 해당 픽셀의 RGB 값을 읽습니다. 그래서 미리보기 축소 과정에서 섞인 색이 아니라 원본 픽셀의 색상 코드를 확인할 수 있습니다. 표시하는 좌표는 0부터 시작하므로 왼쪽 위 픽셀은 0, 0입니다.

HEX는 8비트 빨강·초록·파랑 채널을 각각 16진수 두 자리로 적는 표기입니다. #3B82F6은 rgb(59 130 246)과 같습니다. 각 채널은 0부터 255까지 256개 정수 중 하나이므로, 불투명 24비트 RGB 색은 256³, 즉 16,777,216가지입니다.

대표 색상 팔레트는 어떻게 뽑나요?

속도를 위해 긴 변이 최대 256픽셀이 되도록 줄인 분석용 Canvas에서 색을 셉니다. 비슷한 8비트 RGB 값을 정해진 방식으로 묶고, 모든 표본 픽셀을 가장 가까운 대표색에 다시 배정합니다. 따라서 같은 이미지와 같은 색상 수에서는 같은 팔레트가 나오며, 각 색상 옆 비율의 합은 표본의 100%입니다.

투명도가 50% 미만인 픽셀은 뒤 배경에 따라 보이는 색이 달라져 팔레트에서 제외합니다. 작은 로고 장식처럼 면적이 작은 색은 대표색에 없을 수 있으니, 해당 지점을 직접 눌러 정확한 HEX·RGB·HSL 값을 확인합니다.

웹과 디자인 작업에서는 표기를 목적에 맞게 고릅니다

CSS·디자인 토큰에는 #3B82F6 같은 HEX가 편리하고, Canvas 코드나 채널 값을 다룰 때는 rgb(59 130 246)가 알맞습니다. HSL은 색상 각도와 채도·명도 백분율로 같은 sRGB 색을 적으므로 수동으로 약간 조정할 때 유용합니다.

대표 팔레트가 곧 글자 가독성을 보장하지는 않습니다. 텍스트에 쓸 색은 실제 배경과 글자 크기에서 확인해야 하며, 관련 색상 변환기에서 흰색·검은색 배경의 WCAG 대비율을 점검할 수 있습니다.

자주 묻는 질문