색상 추출

이 도구로 할 수 있는 일

이미지에서 원하는 픽셀의 색을 집어 HEX, RGB, HSL 값으로 보고 복사합니다. 이미지의 대표 색 팔레트도 자동으로 뽑아 줍니다. 디자인 참고 색을 정할 때 씁니다.

사용 순서

1. 이미지를 올립니다.
2. 이미지 위를 클릭하거나 누른 채 움직여 색을 집습니다. 아래 팔레트의 색 견본을 눌러도 됩니다.
3. HEX, RGB, HSL 옆의 "복사" 버튼으로 원하는 표기를 복사합니다.
4. 자주 쓸 색은 "현재 색 저장"으로 모아 두고 "저장한 색 모두 복사"로 한꺼번에 복사합니다.

설정 설명

• 색 값 칸: HEX, RGB, HSL 중 아무 곳에 값을 직접 입력해도 나머지가 따라 바뀝니다. #RGB, #RRGGBB, rgb(r, g, b), hsl(h, s%, l%) 형식을 받습니다.
• 색 개수: 대표 색 팔레트에 보여 줄 색의 수(5, 8, 12, 16)입니다.
• 스포이드: 지원하는 브라우저(크롬, 엣지 등)에서만 나타나며, 이미지가 아닌 화면의 다른 곳에서도 색을 집을 수 있습니다.
• 저장한 색: 최대 20개이고 같은 색은 중복으로 저장되지 않습니다. 이미지를 바꿔도 유지됩니다.

동작 원리

이미지를 원본 크기로 캔버스에 그려 두고, 클릭한 위치의 픽셀 값을 읽어 색을 얻습니다. 대표 색은 절반 넘게 투명한 픽셀을 뺀 모든 픽셀을 채널당 4비트로 줄여 비슷한 색끼리 센 뒤, 많은 순서대로 고르되 이미 고른 색과 거리가 가까운 색(RGB 거리 40 미만)은 건너뛰는 방식으로 뽑습니다. 후보가 부족하면 그 기준을 낮춰 개수를 채웁니다. 큰 이미지는 일부 픽셀만 샘플로 세어 빠르게 처리합니다.

알아두기

• 색 값은 화면에 보이는 이미지의 색을 그대로 읽은 것이라 이미지에 색상 프로필이 있으면 프로그램에 따라 다르게 보일 수 있습니다.
• 반투명한 픽셀은 색은 집히지만 투명도는 색 값에 포함되지 않고 위쪽 정보 줄에만 표시됩니다.
• GIF는 첫 번째 프레임에서 색을 집습니다.
• 탭을 닫으면 결과가 사라집니다.