이미지 색상 추출기

이미지 위를 누르면 그 픽셀의 색상 코드가 나옵니다 — 예시 이미지의 해 가운데(880, 470)는 #FBEDCA

위 도구는 고른 이미지를 브라우저의 캔버스에 그린 뒤, 누른 자리의 픽셀 값을 그대로 읽어 HEX·RGB·HSL·HSV·CMYK 다섯 가지 코드로 보여 줍니다. 예시 이미지의 해 가운데를 누르면 rgb(251, 237, 202), 곧 #FBEDCA가 나오고, CSS 색 이름 가운데 가장 가까운 blanchedalmond도 함께 적힙니다. 값은 화면에 줄여 보이는 미리보기가 아니라 원본 픽셀(긴 변 4,096 px를 넘으면 그 안으로 줄임)에서 읽으므로, 큰 사진을 올려도 한 픽셀 단위로 찍을 수 있습니다.

옆의 돋보기는 찍은 지점 둘레 11×11픽셀을 확대해 보여 주고, 화살표 키로 1픽셀씩 옮길 수 있습니다. JPEG 사진처럼 이웃 픽셀끼리 값이 조금씩 다른 이미지는 '읽는 범위'를 3×3이나 5×5 평균으로 바꾸면 대표값에 가까워집니다. 아래 '이미지의 주요 색'은 이미지 전체에서 많이 쓰인 색을 묶어 점유율 막대와 함께 보여 주고, 색상표를 PNG나 CSS 변수로 저장합니다. 이미지는 이 브라우저 안에서만 읽고 서버로 보내지 않습니다.

어떤 상황에서 이미지의 색을 찍는가

• 캡처에서 브랜드 색을 그대로 가져올 때: 로고나 웹 화면 캡처에서 배경색·버튼색을 찍어 HEX를 복사하면 CSS 변수나 디자인 도구에 바로 붙일 수 있습니다. 로고처럼 색이 고른 면은 1픽셀로 읽고, 가장자리는 돋보기로 면 안쪽인지 확인합니다.
• 썸네일·배너·슬라이드의 분위기를 사진에 맞출 때: 사진 한 장의 주요 색 4~8개를 뽑아 제목 배경과 강조색으로 쓰면 사진과 글자가 따로 놀지 않습니다. 점유율이 큰 색은 바탕으로, 작은 색은 강조로 두는 식입니다.
• 글자를 올릴 배경색을 고를 때: 찍은 색 위에 흰 글자나 검은 글자가 읽히는지 명암비로 바로 확인합니다. 예시의 해 색 #FBEDCA 위에는 검은 글자(18.0:1)만 읽히고 흰 글자(1.1:1)는 쓸 수 없습니다.
• 사진 보정·일러스트의 기준값을 잴 때: 하늘·피부·그림자의 실제 값을 숫자로 보면 보정 전후를 비교하거나 다른 그림과 톤을 맞출 수 있습니다. 이때는 3×3·5×5 평균이 한 픽셀의 노이즈를 걸러 줍니다.

쓰는 법

1. 이미지 올리기: '이미지 고르기'를 누르거나 파일을 끌어다 놓거나, 복사한 이미지를 Ctrl+V(⌘V)로 붙여 넣습니다. 바로 써 보려면 '예시 이미지'를 누릅니다.
2. 지점 찍기: 이미지 위를 누르면 그 자리의 색이 결과에 나오고, 누른 채 끌면 따라갑니다. 손을 떼면 그 색이 '최근 찍은 색'에 남습니다(최대 8개). 터치 화면에서는 손을 뗀 자리가 찍힙니다.
3. 한 픽셀 맞추기: 돋보기 가운데 칸이 찍힌 픽셀입니다. 무대에 초점을 두고 화살표 키를 누르면 1픽셀, Shift+화살표는 10픽셀씩 옮겨지고, Enter로 최근 찍은 색에 저장합니다.
4. 읽는 범위 고르기: 단색 면은 1픽셀, JPEG 사진·스캔은 3×3 평균, 노이즈가 많은 사진은 5×5 평균이 맞습니다. 돋보기의 테두리 칸이 평균에 들어가는 범위입니다.
5. 코드 복사: 줄마다 '복사'를 누르거나 '코드 모두 복사'로 다섯 줄을 한 번에 복사합니다. 불투명도가 100%가 아닌 픽셀은 불투명도 줄이 따로 나옵니다.
6. 주요 색 뽑기: 이미지를 올리면 6색이 바로 나오고 4·8·12색으로 바꿀 수 있습니다. 칩을 누르면 그 색의 코드가 위에 나오고, 'PNG 색상표 저장'은 칩과 HEX·점유율이 적힌 그림을, 'CSS 변수 복사'는 --color-1: #1F2531; 같은 줄을 만듭니다.

다섯 가지 색 코드가 뜻하는 것

같은 색을 다섯 가지로 적는 이유는 쓰는 곳이 다르기 때문입니다. 예시 이미지의 네 지점을 찍은 값입니다.

표의 값은 2026-10-14에 예시 이미지(sample.jpg, 1,280 × 854)를 이 도구로 읽은 값입니다. HEX·RGB·HSL·HSV·CMYK 변환식과 명암비 식은 해마다 바뀌는 규칙이 아니고, 가까운 이름은 CSS Color Level 4의 148색 기준입니다.

• HEX는 빨강·초록·파랑 세 값을 00~FF 두 자리씩 붙인 여섯 자리로, CSS·디자인 토큰·문서 공유에 가장 널리 씁니다. #FBEDCA는 FB = 251, ED = 237, CA = 202입니다.
• RGB는 같은 세 값을 0~255 십진수로 적은 것입니다. 캔버스·스크립트·이미지 처리 코드에서는 이 숫자를 그대로 씁니다.
• HSL은 색상(0~360°)·채도·밝기입니다. CSS Color Level 4는 0°를 sRGB의 빨강, 120°를 초록, 240°를 파랑으로 정하고, HSL 값은 sRGB로 풀린다고 적습니다. "조금 더 밝게", "채도를 낮게"처럼 색을 설명하고 고칠 때 편합니다.
• HSV(HSB라고도 함)는 색상·채도·명도(V = 세 채널의 최댓값)로, 포토샵 같은 그림 도구의 색 고르기 창이 쓰는 모델입니다. 1978년 앨비 레이 스미스가 HSV를, 같은 해 조블러브와 그린버그가 HSL을 발표했습니다. 같은 색이라도 HSL과 HSV의 채도 값은 다릅니다(해 가운데는 HSL 86%, HSV 20%).
• CMYK는 CSS Color Level 5가 적은 단순 환산식으로 구합니다. 검정 K = 1 − max(R, G, B), 나머지는 검정을 뺀 비율(C = (1 − R − K) ÷ (1 − K))입니다. 잉크·용지·프로파일 정보가 없는 값이라 같은 규격은 이 근사가 "실제 인쇄 결과와 시각적으로 매우 멀 수 있다"고 밝힙니다. 인쇄 발주에는 인쇄소의 ICC 프로파일로 변환한 값을 쓰세요.

한 픽셀과 3×3 평균이 다른 이유

JPEG는 색 정보를 밝기보다 낮은 해상도로 저장합니다. 가장 흔한 4:2:0 방식은 색 해상도를 가로·세로 각각 절반으로 줄여 2×2픽셀이 색 표본 하나를 나눠 쓰고, 이미지를 8×8 블록으로 나눠 주파수 변환과 양자화를 거치므로 경계선 근처와 블록 경계에서 원래 없던 값의 흔들림(노이즈·블록)이 생깁니다. 그래서 같은 면을 찍어도 이웃 픽셀끼리 값이 조금씩 다릅니다. 예시 이미지의 바다 (640, 560)을 1픽셀로 읽으면 #2F405C, 3×3 평균으로 읽으면 #2E3F5C입니다. 눈에는 같은 파랑이지만 빨강·초록 값이 1씩 다릅니다.

안티에일리어싱된 글자·선·그라데이션도 경계에서는 두 색이 섞인 중간값이 나옵니다. 이런 곳은 돋보기에서 가운데 칸이 한 면 안에 들어가는지 보고 화살표로 한두 픽셀 옮기면 됩니다. 반대로 3×3·5×5 평균은 범위 안에 두 면이 함께 들어오면 둘을 섞어 버리므로, 경계 근처에서는 평균을 끄고 1픽셀로 읽는 편이 맞습니다. PNG 로고나 UI 캡처처럼 압축 노이즈가 없는 이미지는 1픽셀 값이 곧 정답입니다.

주요 색은 어떻게 뽑나

이미지 전체에서 절반 이상 불투명한 픽셀(알파 128 이상)을 같은 간격으로 최대 40,000개 골라 표본을 만듭니다. 예시 이미지(1,280 × 854)는 6픽셀 간격으로 30,602개입니다. 이 표본을 Heckbert(1982)의 median cut으로 묶습니다. 빨강·초록·파랑 가운데 값이 가장 넓게 퍼진 채널을 골라 표본 수가 절반이 되는 곳에서 상자를 둘로 나누기를 원하는 색 수만큼 반복하고, 상자마다 평균색을 냅니다. 그다음 사람 눈의 색 차이에 가깝게 만든 OKLab 색 공간(Ottosson 2020)에서 표본을 가장 가까운 색에 다시 배정해 평균을 네 번 다듬습니다. 무작위 시작점을 쓰지 않으므로 같은 이미지·같은 색 수면 언제나 같은 결과가 나옵니다.

막대의 길이는 각 색에 가장 가까운 표본의 비율입니다. 색 수를 4로 줄이면 비슷한 색끼리 더 크게 묶이고(어두운 바탕 34%, 분홍빛 23%, 살구빛 22%, 보랏빛 20%), 12로 늘리면 하늘의 그라데이션이 여러 단계로 나뉩니다. 썸네일 바탕색을 고를 때는 4~6색, 사진의 톤을 여러 단계로 보려면 8~12색이 맞습니다. 팔레트는 "많이 쓰인 색"이지 "눈에 띄는 색"이 아니므로, 작은 포인트색은 점유율이 낮아 빠질 수 있습니다. 그런 색은 직접 찍으세요.

글자를 올려도 되는 색인지 보는 명암비

결과의 '이 색을 배경으로 글자를 올리면'은 WCAG 2.2가 정한 명암비입니다. 두 색의 상대 휘도 L1, L2(밝은 쪽이 L1)로 (L1 + 0.05) ÷ (L2 + 0.05)를 구하며, 성공 기준 1.4.3은 본문 글자에 4.5:1 이상, 큰 글자(18 pt 이상이거나 14 pt 굵은 글자)에 3:1 이상을 요구합니다. 더 엄격한 1.4.6(AAA)은 7:1과 4.5:1입니다. 이 도구는 4.499:1이 4.5로 보여 통과처럼 읽히지 않도록 소수 첫째 자리까지만 남기고 그 아래를 버린(내림) 값으로 보여 주고 판정합니다.

명암비는 흰 글자와 검은 글자 두 가지만 잽니다. 다른 글자색이나 두 색의 조합은 별도 대비 검사 도구로 확인하세요.

자주 틀리는 경우

• 다른 앱과 값이 다르다: 캔버스의 기본 색 공간은 sRGB이고, 색 프로필(Display P3 등)이 붙은 이미지는 브라우저가 sRGB로 바꿔 읽습니다. P3로 보는 앱에서 찍은 값과 다를 수 있고, sRGB 밖의 진한 색은 범위 안으로 눌립니다.
• 줄여 보이는 미리보기에서 읽은 값: 미리보기 크기로 다시 그린 이미지는 여러 픽셀이 섞인 값이 됩니다. 이 도구는 원본 크기(긴 변 4,096 px 안)에서 읽지만, 4,096 px를 넘는 이미지는 줄여 읽으므로 화면에 '줄여 읽음'이 표시되면 경계 근처 값은 평균이 섞인 값입니다.
• 투명 픽셀 위의 색: 투명 PNG에서 완전히 투명한 픽셀은 색이 없고(알파 0), 반투명 픽셀은 불투명도 줄이 따로 나옵니다. 흰 배경 위에서 보이는 색을 원하면 흰 배경과 합성한 값을 따로 계산해야 합니다.
• CSS 이름을 정확한 색으로 오해: 이름은 148개 CSS 색 가운데 OKLab 거리가 가장 가까운 것일 뿐입니다. '가장 가까운'이 붙어 있으면 그 이름의 색과 같지 않습니다. CSS 규격도 이 이름들을 "사용을 권장하지 않는다"고 적습니다.
• HSL과 HSV의 채도 혼동: 같은 색이라도 두 모델의 S 값은 다릅니다. 도구의 색 고르기 창이 어느 모델인지 보고 맞는 줄을 복사하세요.
• 경계에서 평균 읽기: 3×3·5×5 평균 범위에 두 면이 함께 들어오면 두 색의 중간값이 나옵니다. 돋보기의 테두리 칸이 한 면 안에 있는지 확인하세요.

한계와 주의

• 긴 변이 4,096 px를 넘는 이미지는 그 안으로 줄여 읽습니다(iOS 캔버스 한계). 줄어든 비율만큼 픽셀이 섞여 읽히며, 좌표도 줄인 이미지 기준입니다.
• 값은 sRGB 기준입니다. 색 프로필이 있는 이미지는 브라우저가 sRGB로 변환한 뒤의 값이고, 반투명 픽셀은 캔버스가 프리멀티플라이 알파로 저장했다가 되돌리므로 원본과 달라질 수 있고, 불투명도가 낮을수록 차이가 커집니다.
• 일부 브라우저의 핑거프린팅 보호 설정은 캔버스에서 읽는 값에 아주 작은 노이즈를 섞습니다. 같은 이미지인데 값이 1씩 흔들리면 그 설정을 의심하세요.
• 올릴 수 있는 형식은 브라우저가 디코딩하는 형식(JPG·PNG·GIF·WebP·AVIF·SVG·BMP 등)이고 크기는 40 MB까지입니다. TIFF는 Safari만 열고, 아이폰 HEIC는 Safari 17 이상만 열며 Chrome·Edge·Firefox는 열지 못합니다.
• CMYK는 단순 환산값이라 인쇄 기준이 아니고, 명암비는 흰·검은 글자 두 가지만 잽니다.
• 이미지와 좌표는 저장하지 않고, 최근 찍은 색 HEX 8개만 이 브라우저의 저장소에 남습니다. 이 도구에는 상태 링크가 없습니다.

출처

• 01MDN — CanvasRenderingContext2D.getImageData()픽셀 읽기, 핑거프린팅 보호 노이즈, 교차 출처 SecurityError, colorSpace srgb·display-p3
• 02MDN — HTMLCanvasElement.getContext()2d 컨텍스트 colorSpace 기본값 "srgb", willReadFrequently
• 03HTML Standard — 4.12.5 Pixel manipulationgetImageData 는 캔버스 색 공간으로 relative-colorimetric 변환, 프리멀티플라이 알파 왕복은 손실
• 04CSS Color Module Level 4 — §6.1 Named Colors, §7 HSL Colors148색(VGA 16 + X11), 대소문자 무관, 사용 권장 안 함 · HSL 0° 빨강·120° 초록·240° 파랑, sRGB 기준
• 05CSS Color Module Level 5 — §6.1 Naively Converting Between Uncalibrated CMYK and sRGB-Based Colorblack = 1 − max(red, green, blue), cyan = (1 − red − black) ÷ (1 − black), 인쇄 결과와 눈에 띄게 다를 수 있음
• 06WCAG 2.2 — 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced)4.5:1, 큰 글자(18 pt 또는 14 pt 굵게) 3:1, AAA 7:1·4.5:1, 명암비 (L1 + 0.05) ÷ (L2 + 0.05)
• 07Wikipedia — HSL and HSVHSV = HSB, V = max(R, G, B), L = (max + min) ÷ 2, Smith 1978·Joblove & Greenberg 1978
• 08Wikipedia — JPEG4:2:0 색 해상도 가로·세로 절반, 8×8 블록 DCT·양자화, 경계 노이즈·블록 아티팩트
• 09Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut
• 10Björn Ottosson — A perceptual color space for image processing2020-12-23. OKLab(선형 sRGB → LMS → 세제곱근 → Lab)
• 11MDN — Image file type and format guideAPNG·AVIF·GIF·JPEG·PNG·SVG·WebP 지원, BMP·ICO, TIFF 는 Safari 만
• 12MDN — <canvas>: Maximum canvas sizeiOS 기기 4,096 × 4,096 한계
• 13Can I use — HEIF/HEIC image formatSafari 17 이상(macOS·iOS)만 지원, Chrome·Edge·Firefox 미지원 (2026-10-14 확인)

자주 묻는 질문

함께 쓰는 도구