웹 도구 모음 › 이미지 색상 추출

이미지 색상 추출

사진 속 색을
코드로 뽑아내기

이미지를 올리면 대표 색상 팔레트가 바로 추출됩니다. HEX·RGB 코드를 클릭 한 번으로 복사하고, 스포이드로 원하는 지점의 색만 딱 집어낼 수도 있습니다.

사진은 서버로 올라가지 않고 전부 이 브라우저 안에서 처리됩니다.

이미지를 끌어다 놓거나 클릭해서 선택

PNG · JPG · WebP · GIF · BMP · SVG / Ctrl+V 붙여넣기 지원

이미지 색상 추출 사용법

  1. 이미지 올리기: 위 상자에 사진을 끌어다 놓거나 클릭해서 고릅니다. 캡처한 화면을 Ctrl+V로 붙여넣어도 됩니다.
  2. 팔레트 확인: 대표 색상이 사진에서 차지하는 비중 순서로 나열됩니다. 색상 수 슬라이더를 움직이면 3~10색 사이에서 바로 다시 추출됩니다.
  3. 스포이드로 집어내기: 자동 추출에 없는 색이 필요하면 미리보기 이미지에서 그 지점을 클릭하세요. 로고의 포인트 색, 하늘의 특정 톤처럼 원하는 색만 찍을 수 있습니다.
  4. 복사·저장: 색상 카드를 클릭하면 HEX가, RGB 줄을 클릭하면 RGB 값이 복사됩니다. 전체가 필요하면 HEX 목록 복사·CSS 변수 복사·팔레트 이미지 저장을 쓰세요.

이럴 때 쓰세요

자주 묻는 질문 (FAQ)

사진이 서버로 올라가나요?

아니요. 이미지 읽기부터 색상 추출, 팔레트 저장까지 전부 여러분의 브라우저 안에서 처리됩니다. 사진이 외부로 전송되거나 저장되지 않으니 공개 전 시안이나 개인 사진도 안심하고 쓸 수 있습니다.

대표 색상은 어떻게 뽑나요?

미디언 컷(median cut)이라는 색상 양자화 방식을 씁니다. 사진의 픽셀을 색 공간에 펼친 뒤 가장 넓게 퍼진 축을 절반씩 잘라 가며 그룹을 나누고, 각 그룹의 평균색을 대표색으로 삼습니다. 비중이 큰 색부터 순서대로 보여주며, 원리가 궁금하면 대표 색상 추출의 원리 글에 자세히 정리해 두었습니다.

원하는 부분의 색만 딱 집어서 뽑을 수 있나요?

네. 미리보기 이미지 위에서 마우스를 움직이면 그 지점의 색이 실시간으로 표시되고, 클릭하면 스포이드로 찍은 색 목록에 추가됩니다. 자동 팔레트는 면적이 넓은 색 위주라 작은 포인트 색은 빠질 수 있는데, 그럴 때 스포이드를 쓰면 됩니다.

추출된 색이 눈으로 보는 색과 조금 다른 것 같아요

자동 팔레트의 각 색은 비슷한 픽셀들의 평균이라, 사진 속 한 픽셀과 정확히 같지 않을 수 있습니다. 특정 지점의 색이 정확히 필요하면 스포이드로 그 자리를 직접 클릭하세요. 또 모니터마다 색 표현이 달라서 같은 코드도 화면에 따라 다르게 보일 수 있습니다.

HEX와 RGB는 뭐가 다른가요?

같은 색을 적는 두 가지 표기법입니다. HEX(#C23B30)는 웹에서 가장 널리 쓰이는 16진수 표기이고, RGB(194, 59, 48)는 빨강·초록·파랑의 양을 10진수로 적은 것입니다. 서로 1:1로 변환되니 쓰는 프로그램이 요구하는 쪽을 복사하면 됩니다. 자세한 내용은 색상 코드 읽는 법을 참고하세요.

GIF나 투명 배경 PNG도 되나요?

됩니다. GIF는 첫 프레임을 기준으로 추출하고, 투명 배경 PNG는 투명한 픽셀을 빼고 실제로 보이는 색만으로 팔레트를 만듭니다.

색상 가이드

함께 쓰면 좋은 도구