이미지에서 색 추출

이미지에 쓰인 색을 뽑아 색상 코드(HEX·RGB)로 보여 줍니다.

1. 색을 뽑을 이미지 고르기

JPEG·PNG·WebP·GIF·HEIC(iPhone 사진)를 지원합니다.

여기에 이미지를 끌어다 놓으세요

또는

2. 쓰인 색

이미지에 많이 쓰인 색을 많은 순서로 늘어놓았습니다. 누르면 복사됩니다.

색의 수

표시 형식

3. 한 번에 쓰기

뽑은 색을 이미지로 저장하거나 한 번에 복사할 수 있습니다.

처리는 이 기기 안에서 이루어지며, 이미지는 업로드되지 않습니다.

색은 이미지를 줄인 뒤에 세기 때문에, 아주 작은 부분의 색은 팔레트에 나오지 않을 수 있습니다. 그럴 때는 스포이트로 뽑아 주세요.

도움이 되었다면 공유해 주세요

잘 작동하지 않거나 ‘이랬으면 좋겠다’ 싶은 점이 있다면

문제 알리기개선 아이디어 보내기

사용 방법

  1. 1. 이미지 고르기

    ‘파일 선택’을 눌러 색을 알아볼 사진이나 이미지를 고르세요.

  2. 2. 쓰인 색 보기

    이미지 아래에 많이 쓰인 색이 많은 순서로 나옵니다. ‘색의 수’나 ‘표시 형식’을 바꿀 수 있고, 색을 누르면 복사됩니다.

  3. 3. 스포이트로 색 뽑기

    이미지 위를 누르면 그 자리의 색을 뽑아 복사합니다. 잠깐 길게 누른 뒤 손가락을 움직이면 돋보기가 나와 세밀한 곳을 고를 수 있고, 손가락을 뗀 곳의 색을 뽑습니다.

  4. 4. 한 번에 쓰기

    ‘팔레트를 이미지로 저장’으로 색과 색상 코드를 늘어놓은 이미지를 저장할 수 있습니다.

이럴 때 추천해요

  • 사진이나 일러스트의 배색을 참고하고 싶을 때

    마음에 드는 사진이나 일러스트에서 색을 뽑아 자료·슬라이드·사이트의 배색에 쓸 수 있습니다.

    디자인이나 자료를 만드는 사람

  • 로고나 상품의 색을 알고 싶을 때

    이미지 위를 누르기만 하면 그 자리의 색상 코드를 알 수 있습니다. 로고나 브랜드 색을 확인할 때 좋습니다.

    웹 제작·홍보 담당자

  • CSS에 바로 쓰고 싶을 때

    팔레트를 ‘CSS 변수로 복사’하면 스타일시트에 그대로 붙여 넣을 수 있습니다.

    웹 개발자

  • 수공예나 도색의 색 고르기에

    사진의 색을 색상 코드로 적어 두면 물감이나 털실, 천을 고를 때 기준이 됩니다.

    무언가를 만드는 사람

사용하기 전에 알아 두세요

  • 화면의 색은 모니터나 사진의 밝기에 따라 다르게 보입니다. 인쇄에 쓰는 색(CMYK)은 인쇄소의 색 견본으로 확인해 주세요.
  • 강하게 압축된 JPEG는 같은 색으로 보이는 부분에도 조금씩 다른 색이 섞여 있습니다. 정확한 색은 스포이트로 뽑아 주세요.
  • 이미지를 가볍게 하고 싶다면 ‘이미지 압축’가 편리합니다.

색상 코드에 대해

색상 코드는 색을 숫자로 나타낸 것입니다. 웹이나 디자인 프로그램에서는 HEX·RGB·HSL의 세 가지 표기가 많이 쓰입니다. 모두 같은 색을 나타내며 쓰는 방법만 다릅니다.

이 도구는 이미지를 작게 줄인 뒤, 비슷해 보이는 색끼리 묶어서 많이 쓰인 색을 찾습니다. 비율(%)은 이미지에서 그 색에 가까운 부분이 얼마나 되는지의 기준입니다.

색상 코드 표기의 차이
표기 예자주 쓰는 곳
HEX#F5A524웹·디자인 프로그램
RGBrgb(245, 165, 36)CSS·이미지 편집 프로그램
HSLhsl(37, 91%, 55%)밝기나 선명도를 바꿀 때

자주 묻는 질문

사용하기 전에 궁금해하기 쉬운 점을 모았습니다.

이미지가 어딘가로 전송되나요?

전송되지 않습니다. 모든 처리는 사용 중인 기기의 브라우저 안에서 이루어지며, 이미지가 서버에 업로드되지 않습니다.

뽑은 색은 정확한가요?

스포이트로 뽑은 색은 누른 자리의 픽셀 색 그대로입니다. 팔레트의 색은 비슷한 색을 묶은 평균이라서, 이미지의 어느 한 점과도 정확히 같지 않을 수 있습니다.

원하는 색이 팔레트에 나오지 않습니다.

‘색의 수’를 12로 하면 적게 쓰인 색도 나오기 쉬워집니다. 아주 작은 부분의 색은 이미지 위를 눌러 스포이트로 뽑아 주세요.

색을 복사하려면 어떻게 하나요?

팔레트의 색을 누르면 복사됩니다. 스포이트로 뽑은 색도 누른 순간 복사됩니다. ‘HEX 모두 복사’로 모든 색을 한 번에 복사할 수도 있습니다.

HEX·RGB·HSL은 무엇이 다른가요?

같은 색을 쓰는 방법의 차이입니다. HEX는 ‘#’과 16진수, RGB는 빨강·초록·파랑의 세기, HSL은 색상·채도·밝기로 나타냅니다. 쓰는 곳에 맞게 바꿔 주세요.

인쇄용 색(CMYK)도 알 수 있나요?

알 수 없습니다. 이 도구로 알 수 있는 것은 화면에 표시하기 위한 색(sRGB)입니다. 인쇄에 쓸 때는 인쇄소의 색 견본으로 확인해 주세요.

투명한 부분은 어떻게 되나요?

팔레트를 만들 때 투명한 부분은 세지 않습니다.

팔레트를 저장할 수 있나요?

‘팔레트를 이미지로 저장’으로 색과 색상 코드를 늘어놓은 PNG 이미지를 저장할 수 있습니다. ‘CSS 변수로 복사’로 스타일시트에 쓸 수 있는 형태로 복사할 수도 있습니다.

iPhone 사진(HEIC)도 쓸 수 있나요?

쓸 수 있습니다. JPEG·PNG·WebP·GIF 외에 iPhone의 HEIC 사진에서도 색을 뽑을 수 있습니다.

무료로 쓸 수 있나요?

무료입니다. 가입도 필요 없고 광고도 없습니다.

다른 도구