Pico ImagePico Image

이미지 컬러 피커 - 픽셀의 HEX 코드 추출

이미지를 업로드하고 원하는 픽셀을 가리키면 정확한 HEX, RGB, HSL 값을 읽어 줍니다. 픽셀 격자 돋보기가 십자선 아래를 보여 주고, 화살표 키로 표본을 한 픽셀씩 옮길 수 있으며, 아무것도 브라우저 밖으로 나가지 않습니다.

이미지에서 색 하나를 골라내는 이유

색에 관한 질문은 대개 이미지 전체가 아니라 특정한 한 지점에 관한 것입니다. 승인된 디자인의 스크린샷을 건네받아 그 버튼 채우기 색을 CSS로 그대로 재현해야 합니다. 고객이 로고 JPG를 보내왔고 무엇을 만들기 전에 브랜드 레드 값을 알아야 합니다. 차트 계열 색을 슬라이드의 헤더 색에 맞춰야 합니다. 사진에서 똑같아 보이는 두 색상 견본이 정말 같은 값인지, 아니면 하나가 두 단계 어두운지 확인해야 합니다. 이 모든 경우에 자동 팔레트는 잘못된 답입니다. 면적을 가장 많이 차지하는 여섯 색을 돌려줄 뿐이고, 정작 필요한 색은 어떤 군집 알고리즘도 끄집어내지 않을 40픽셀짜리 포인트 색일 수 있습니다. 픽셀을 직접 가리킬 수 있다는 것, 그것이 이 도구의 전부입니다. 원본 파일이 사라졌을 때 가장 빠른 길이기도 합니다. 디자인 시스템은 흔들리고 원본 파일은 사라지며, 평탄화된 PNG 내보내기가 그 색이 무엇이었는지 남은 유일한 기록인 경우가 많습니다. 되읽는 데는 몇 초면 되고 디자인 소프트웨어를 설치할 필요도 없습니다. 디자이너가 전혀 관여하지 않은 작업도 마찬가지입니다. 보정 전에 피부톤을 확인하는 사진가, 버그 리포트 스크린샷에서 배경색을 옮겨 오는 개발자, 학습지에 쓸 색을 그림에서 뽑아내는 교사가 있습니다. 모든 처리가 로컬에서 이루어지므로 미공개 목업이나 내부 스크린샷이 기기를 벗어나지 않습니다.

원본 파일이 없어도 평탄화된 스크린샷에서 버튼, 배지, 로고 마크의 정확한 색 되찾기
자동 팔레트가 주요 색이라고 판단한 것을 받아들이는 대신 필요한 픽셀을 직접 가리키기
화살표 키 미세 이동과 13 x 13 픽셀 돋보기로 1픽셀 테두리나 가느다란 안티에일리어싱 경계에 정확히 내려앉기
같은 픽셀을 HEX, RGB, HSL로 복사하고 투명도가 있으면 HEXA와 RGBA까지 함께 얻기

이미지에서 색을 가져오는 방법

네 단계이며 계정도 설치도 필요 없습니다. 파일은 페이지가 직접 읽으며 서버로 업로드되지 않습니다.

1

업로드 영역에 이미지를 끌어다 놓거나 파일을 선택하거나 클립보드에서 바로 붙여넣습니다. JPG, PNG, WebP, GIF, SVG 모두 됩니다.

2

포인터를 이미지 위로 움직입니다. 돋보기가 십자선 주변의 픽셀 격자를 보여 주고 패널이 실시간으로 갱신됩니다. 터치 화면에서는 누른 채 끄세요. 돋보기가 손가락 위쪽에 뜨므로 가려지지 않습니다.

3

화살표 키나 화면의 화살표 버튼으로 미세 조정합니다. 한 번 누르면 표본이 원본 픽셀 하나만큼 정확히 움직입니다. 이미지가 칼럼에 맞춰 축소되고 있다면 실제 크기로 전환하세요.

4

클릭하거나 탭하거나 Enter를 눌러 색을 확정한 뒤 HEX, RGB, HSL 값을 복사합니다. 확정한 색은 최근 목록에 남아 언제든 다시 복사할 수 있습니다.

자주 묻는 질문

값이 어긋나는 원인은 세 가지입니다. 첫째, 대부분의 브라우저는 이미지를 캔버스에 그릴 때 내장 ICC 프로필을 무시하므로 Display P3나 Adobe RGB로 태그된 사진도 그 숫자가 sRGB인 것처럼 읽힙니다. Photoshop처럼 색 관리가 되는 편집기는 프로필을 적용해 다른 값을 보고합니다. 둘째, 모니터는 자체 색역과 캘리브레이션을 거쳐 sRGB를 표시하므로 같은 값이 두 화면에서 다르게 보입니다. 셋째, JPG의 손실 압축은 경계 주변의 픽셀 값을 실제로 바꾸므로, 하나의 평평한 면처럼 보이는 곳에 미세하게 다른 색이 여럿 들어 있을 수 있습니다. 여기 표시되는 숫자는 실제로 저장된 바이트이며, CSS와 코드가 재현하게 될 값이 바로 그것입니다.
캔버스는 알파를 곱하지 않은 색을 돌려줍니다. 즉 RGB와 알파가 따로 저장되어 있습니다. 아무것도 없는 위에 50퍼센트 흰색으로 그린 픽셀은 rgb(255, 255, 255)에 알파 128로 돌아오는데, 이 값은 화면 어디에서도 그대로 보이지 않습니다. 알파가 255보다 작을 때마다 도구는 원시 값과 8자리 HEXA, RGBA 형태를 보여 주고, 그 픽셀이 흰색 배경 위에서 어떤 색이 되는지도 함께 알려 줍니다. 대개 실제로 원하던 숫자는 이쪽입니다.
이 페이지는 가리킨 픽셀을 표본으로 읽습니다. 팔레트 페이지는 이미지 전체를 분석해 군집으로 양자화한 뒤, 그림에서 차지하는 면적 순으로 지배적인 색 4~10개를 돌려줍니다. 로고 마크, 버튼, 잎사귀 하나처럼 어느 지점이 중요한지 이미 알고 있다면 이 도구를, 특정 픽셀이 정해져 있지 않고 이미지 전체에서 뽑아낸 색 구성이 필요하다면 팔레트 페이지를 사용하세요.
아닙니다. 파일은 페이지가 직접 읽어 탭 안의 캔버스로 디코딩하고 그곳에서 표본을 읽습니다. 사본이 서버로 전송되지 않고 저장되는 것도 없으며, 최근 선택 목록은 열려 있는 탭에만 남아 탭을 닫으면 사라집니다. 미공개 목업, 내부 대시보드처럼 아무 웹 폼에나 붙여넣고 싶지 않은 자료에서 중요한 부분입니다.
탭하지 말고 누른 채 끄세요. 돋보기가 접촉점 아래가 아니라 위에 그려지므로 손가락을 화면에 댄 채로도 픽셀 격자를 볼 수 있고, 표본이 손가락을 따라옵니다. 마지막 한두 픽셀은 화면의 화살표 패드를 쓰세요. 한 번 누를 때마다 표본이 원본 픽셀 하나만큼 정확히 움직이는데, 손끝으로는 불가능한 정밀도입니다. 손가락을 떼거나 확인 버튼을 누르면 색이 확정됩니다.
네. 브라우저는 캔버스 전체 면적을 약 1670만 픽셀, 대략 4096 x 4096으로 제한하므로 2400만이나 5000만 화소 파일은 전체 해상도 캔버스 하나로 표시할 수 없고, 미리보기가 더 작게 그려지면서 그 사실을 알려 줍니다. 표본 추출은 이 미리보기를 거치지 않습니다. 값을 읽을 때마다 포인터 주변의 작은 영역만 디코딩된 파일에서 1대1로 다시 그리므로, 얻는 픽셀은 파일에 있는 그 픽셀입니다. 이미지를 미리 자를 필요가 없고, 5000만 화소 사진 속 1픽셀짜리 디테일도 이웃 색과 섞이지 않고 제작된 그대로 읽힙니다.
네, 각각 한 가지 주의사항이 있습니다. 움직이는 GIF는 첫 프레임만 그려지므로 애니메이션 뒷부분에 나오는 색에는 닿을 수 없습니다. 필요한 프레임을 먼저 내보내세요. SVG는 표본을 읽기 전에 래스터화되므로, 마크업에 적힌 원래 채우기 색이 아니라 도형에 적용된 불투명도, 필터, 그라디언트까지 반영된 렌더링 결과의 색을 얻게 됩니다. SVG에 고유 크기가 선언되어 있지 않으면 가로 1024픽셀로 래스터화됩니다.
셋 다 같은 픽셀을 설명하므로 어디에 붙여넣을지에 달렸습니다. HEX는 대부분의 디자인 도구와 스타일시트가 기대하는 간결한 형태입니다. RGB는 한 채널만 조정하거나 두 색을 숫자로 비교할 때 읽기 편합니다. HSL은 정확히 같은 색이 아니라 변형이 필요할 때 복사하세요. 색상과 채도는 그대로 두고 명도만 바꾸면 어울리는 밝은 색이나 어두운 색이 나옵니다. 픽셀에 투명도가 있으면 8자리 HEXA나 RGBA 값도 함께 표시됩니다.

더 많은 이미지 도구

이미지 편집 요구에 맞는 다른 강력한 도구를 살펴보세요

이미지 압축

크기 줄이기

크기 조절

치수 변경

이미지 자르기

영역 자르기

형식 변환

형식 변경

사진 편집기

사진 편집

이미지 회전

이미지 회전

이미지 뒤집기

수평/수직 뒤집기

워터마크 추가

워터마크

테두리 추가

이미지 테두리 추가

둥근 모서리

둥근 모서리 추가

필터

밝기/대비

얼굴 흐리게

얼굴 숨기기

모자이크

영역 흐림

배경 제거

배경 제거

이미지 향상

AI 업스케일

텍스트 추가

이미지에 텍스트 추가

콜라주

여러 이미지 결합

HTML을 이미지로

웹을 이미지로

GIF를 시퀀스로

프레임 추출

이미지 여백 제거

빈 가장자리 제거

이미지 일괄 이름 변경

파일 이름을 안전하게 한꺼번에 변경

원형 자르기

이미지를 원형으로 자르기

흑백

이미지를 흑백으로 변환

이미지 분할

이미지를 그리드로 자르기

이미지 병합

이미지를 하나로 결합

DPI 변경

이미지 DPI 메타데이터 설정

이미지를 Base64로

이미지를 Base64로 인코딩

이미지를 PDF로

이미지를 하나의 PDF로 합치기

HEIC을 JPG로 변환

아이폰 HEIC 사진을 JPG로 변환

EXIF 제거기

GPS 위치를 포함한 사진 속 숨겨진 메타데이터 확인 및 삭제

파비콘 생성기

전체 아이콘 세트와 HTML 제공

색상 팔레트

이미지에서 색상 추출하기

Base64를 이미지로

Base64를 다시 이미지로 디코딩

HEIC를 PNG로

아이폰 HEIC 사진을 무손실 PNG로 변환

이미지 뒤 텍스트

사진 속 피사체 뒤에 텍스트를 넣습니다. 전부 브라우저에서 처리됩니다

서명 만들기

서명을 그려서 투명 PNG로 다운로드

서명 배경 제거

종이에서 잉크만 남겨 투명하게

투명 배경 만들기

배경을 투명하게 만들기

밈 생성기

위·아래 밈 텍스트 넣기

이미지 업스케일러

이미지를 2배·3배·4배로 확대

PDF → JPG

PDF 페이지를 JPG 이미지로 변환

PDF → PNG

PDF 페이지를 PNG 이미지로 변환

여권 사진 메이커

증명사진을 규격에 맞게 자르기