사진에서 원하는 지점의 색을 집어냅니다. 이미지의 주요 색상 팔레트도 함께 뽑아 줍니다.
로딩 중...
참고 이미지에서 색을 가져오려고 캡처 도구 스포이드를 쓰면, 화면에 표시된 픽셀을 찍는 거라 원본과 미묘하게 다른 값이 나왔습니다. 올린 이미지 데이터에서 직접 읽으면 같은 자리에서 늘 같은 값이 나오겠다 싶어 만들었습니다.
이미지는 작은 격자로 나눠서 읽습니다. 집어낸 값은 커서 아래 한 픽셀의 색이 아니라, 그 격자 칸 안에 있는 픽셀들의 평균색입니다. 칸 한 변은 화면에서 약 5픽셀 크기입니다. 픽셀 하나를 정확히 찍어야 하는 작업에는 맞지 않습니다.
Note
올린 이미지는 서버로 전송되지 않습니다. 색을 읽는 처리가 전부 브라우저 안에서 이뤄져, 시안이나 미공개 디자인도 기기 밖으로 나가지 않습니다.
집어낸 색 값도 기록하지 않습니다 — 이용 통계로는 사진을 몇 장 올렸는지, 색을 몇 번 집었는지, 영역 강조를 켰는지, 어떤 형식으로 내보냈는지처럼 동작 횟수만 셉니다. 색 코드나 사진은 어느 쪽에도 담기지 않습니다.
이미지를 끌어다 놓거나 클릭해서 올립니다. 여러 장을 올리면 오른쪽 목록에서 전환하며 볼 수 있습니다. 이미 올린 뒤에도 화면 아무 곳에 파일을 끌어다 놓으면 더 담기고, 썸네일 줄 끝의 ＋ 로도 추가합니다. 썸네일 위 ✕ 로 한 장씩 뺍니다.
이미지 위에 마우스를 올리면 그 지점의 격자 칸이 표시되고, 주변 16×16칸을 확대한 미리보기가 뜹니다. 가운데 빨간 칸이 지금 집고 있는 칸이며, 표시되는 색은 그 칸의 평균색입니다.
클릭하면 색이 고정되고 네 가지 형식의 코드가 나옵니다. 이때 HEX 코드는 곧바로 복사되고 화면 가운데에 '복사되었습니다' 표시가 잠깐 뜹니다. 다른 형식이 필요하면 각 코드 옆 복사 버튼으로 가져가세요.
아래 주요 색상에서 이미지 전체를 대표하는 색 최대 10개를 확인합니다. 색을 누르면 그 색이 선택되면서 HEX가 복사됩니다. 이때 그 색이 쓰인 부분만 이미지에 남고 나머지는 어둡게 덮이며, 같은 색을 다시 누르면 원래대로 돌아옵니다. 팔레트 전체는 CSS 변수 복사·Tailwind 복사 버튼으로 가져갈 수 있습니다.
참고 이미지를 올려 색을 집으면 이렇게 나옵니다.
HEX #33CEB2
RGBA rgba(51, 206, 178, 1)
HSLA hsla(169, 61%, 50%, 1)
CMYK cmyk(75%, 0%, 14%, 19%) ← 참고용
브라우저 확장이나 캡처 도구의 스포이드는 화면에 그려진 픽셀을 찍습니다. 이미지가 화면에 표시될 때 살짝 눌리거나 흐려진 색이 잡히곤 합니다.
색상 코드 추출은 화면이 아니라 올린 이미지 데이터에서 읽습니다. 그래서 같은 이미지의 같은 칸은 언제나 같은 값이 나옵니다.
다만 읽는 단위가 픽셀 하나가 아니라 격자 칸입니다. 칸 한 변은 화면에서 약 5픽셀이 되도록 이미지 크기에 맞춰 정해지고, 그 칸 안의 불투명한 픽셀들을 평균해 값을 냅니다. 그래서 색이 고른 면에서는 픽셀 값과 사실상 같지만, 선 한 줄·글자 테두리·점 하나처럼 색이 급하게 바뀌는 자리에서는 이웃 색이 섞인 값이 나옵니다.
이미지를 긴 변 320픽셀로 줄인 뒤, 픽셀을 비슷한 색끼리 열 개 묶음으로 나누고, 각 묶음의 평균색을 대표 색으로 씁니다. 묶음이 큰 순서대로 보여 줍니다. 단순히 많이 쓰인 색을 세는 방식보다 사진처럼 미세하게 색이 다른 이미지에서 사람이 느끼는 "주요 색감"에 가깝게 나옵니다.
대표색은 이미지를 줄여서 계산하므로, 아주 작게 들어간 강조색은 목록에 안 나올 수 있습니다. 그럴 때는 그 자리를 직접 집으세요.
참고용으로만 쓰세요. 화면의 빛과 종이의 잉크는 색을 만드는 방식이 물리적으로 달라서, 계산으로 환산한 값은 실제 인쇄 결과와 차이가 납니다. 상업 인쇄용이라면 전문 프로그램에서 인쇄용 색 설정을 적용해 변환해야 정확합니다.
긴 변이 1400픽셀을 넘는 이미지는 1400픽셀에 맞춰 줄인 뒤 색을 읽습니다. 여기에 격자 칸 평균까지 겹치므로 아주 미세한 점의 색은 달라질 수 있지만, 면 단위 색은 거의 차이가 없습니다. 1400픽셀 이하 이미지는 줄이지 않고 그대로 읽습니다.
장당 30MB, 최대 20장까지입니다. 처리가 브라우저 안에서 이뤄져 기기 메모리에 맞춘 값입니다.
한 번에 여러 장을 고를 때 30MB를 넘는 파일이 한 장이라도 섞여 있으면 그 묶음 전체가 추가되지 않습니다. 큰 파일만 빼고 다시 고르거나, 카메라 원본 대신 내보내기·저장할 때 용량을 줄인 파일을 올리면 됩니다.
PNG · JPG · WebP만 받습니다. GIF·BMP·HEIC·SVG 같은 형식은 목록에 추가되지 않습니다.
다른 형식이라면 이미지 형식 변환으로 PNG나 JPG로 바꾼 뒤 올려 주세요.
같은 색을 다르게 적는 방식입니다. HEX는 #33CEB2 형태로 웹에서 가장 널리 쓰이고, RGBA는 빨강·초록·파랑에 투명도를 더한 값, HSLA는 색상·채도·명도로 표현해 밝기 조절이 직관적입니다.
인쇄용 색 표기입니다. 청록·자홍·노랑·검정 잉크의 비율로 색을 나타내며, 화면용 표기와 원리가 달라 서로 정확히 대응하지 않습니다.
네, 다만 색을 읽는 방식이 다릅니다. 브라우저 확장 프로그램이나 캡처 도구의 스포이드는 화면에 그려진 점을 찍기 때문에 이미지가 표시될 때 눌린 톤이나 살짝 흐려진 색이 잡히곤 합니다. 이 도구는 화면을 캡처하지 않고 업로드한 이미지 데이터를 직접 읽어, 커서가 놓인 격자 셀 안의 색을 평균 내 보여 줍니다(사진이 아주 크면 긴 변 1400픽셀에 맞춰 줄인 뒤 읽습니다). 커서 주변을 16×16으로 확대한 미리보기로 어느 자리를 집는지 짚어 줍니다. 셀 크기는 이미지가 화면에 표시된 크기에 맞춰 정해지므로, 창 너비가 크게 다르면 같은 지점이라도 평균 범위가 달라져 값이 조금 달라질 수 있습니다.
지점을 클릭하면 그 색이 고정되고 HEX, RGBA, HSLA, CMYK 네 가지 코드가 함께 표시됩니다. 각 코드 옆 복사 버튼으로 형식 그대로 클립보드에 담아 CSS나 디자인 툴에 바로 붙여 넣을 수 있습니다.
사진을 긴 변 320픽셀로 줄인 뒤, 색이 비슷한 점들을 열 개 묶음으로 나누고 각 묶음의 평균색을 대표 색으로 씁니다. 많이 쓰인 색을 그냥 세는 방식보다 얼룩에 덜 흔들려서, 미세하게 색이 다른 점이 많은 사진에서도 눈으로 느끼는 '주된 색감'에 가까운 팔레트가 나옵니다. 주요 색을 클릭하면 그 색이 바로 선택돼 코드로 확인하고 복사할 수 있습니다.
이 도구는 이미지를 서버로 전송하지 않고 모든 분석을 사용자 브라우저 안에서 처리합니다. 그래서 기기 메모리 한도에 맞춰 장당 30MB, 최대 20장으로 제한하고 있습니다. 이 한도를 넘는 사진은 카메라 원본 대신 내보내기·저장할 때 용량을 줄인 파일로 올려 주세요. 색을 읽을 때는 어차피 긴 변 1400픽셀에 맞춰 줄인 화면에서 계산하므로 결과 색은 거의 달라지지 않습니다. 원본이 외부로 나가지 않으므로 시안·미공개 디자인도 안심하고 사용할 수 있습니다.
마지막 업데이트:
또는 파일을 여기에 끌어다 놓으세요
PNG · JPEG · WebP · 최대 20장 · 장당 30MB