⚡전체 도구 💻개발자 및 코딩 📝텍스트 및 콘텐츠 🎨디자인 및 색상 🖼️이미지 및 멀티미디어 🔢데이터 및 계산 🔒보안 및 비밀번호 📄PDF 도구 📐단위 변환

스마트 이미지 컬러 피커 및 픽셀 확대경

로컬 이미지를 업로드하고 픽셀 아트 스타일 정밀 돋보기로 색상을 정밀 추출하며, HEX, RGB, HSL 복사 및 WCAG 색상 대비 검사를 제공합니다。

원본 이미지 (마우스를 움직여 픽셀 색상 추출)

🎨

여기에 이미지를 드래그 앤 드롭하거나 클릭하여 업로드

Supports PNG, JPG, WEBP

#FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)

색상 기록 (클릭하여 대비 확인 또는 복사)

🎨 WCAG 2.1 대비 적합성 검사

텍스트 색상 (전경)

배경 색상

대비 비율: 4.52:1

WCAG AA 표준 (대비 비율 ≥ 4.5:1)

일반 텍스트: 합격 ✅ 큰 텍스트 (18pt+): 합격 ✅

WCAG AAA 표준 (대비 비율 ≥ 7.0:1)

일반 텍스트: 불합격 ❌ 큰 텍스트 (18pt+): 합격 ✅

사용 방법

1 스마트 이미지 컬러 피커 및 픽셀 확대경를 열고 처리할 내용을 입력·붙여넣기·선택하세요.
2 필요에 맞게 옵션과 출력 형식을 조정하세요.
3 결과를 확인한 뒤 복사하거나 다운로드하세요.

주요 사용 사례

로컬 이미지를 업로드하고 픽셀 아트 스타일 정밀 돋보기로 색상을 정밀 추출하며, HEX, RGB, HSL 복사 및 WCAG 색상 대비 검사를 제공합니다。 일상 업무, 개발, 학습, 빠른 확인에 활용할 수 있습니다.

개인정보와 데이터 처리

이 도구는 브라우저에서 작동합니다. 민감한 자료를 처리하기 전에 기기와 브라우저 환경을 확인하세요.

이미지에서 정확한 색을 뽑고 배색이 잘 보이는지 확인하기

웹사이트, 발표 자료, SNS 카드를 디자인할 때 브랜드 로고나 제품 사진, 참고 이미지에서 정확한 색을 뽑아야 할 때가 많습니다. 눈대중으로 색상 코드를 추측하면 틀리기 쉽고, 스크린샷을 디자인 프로그램에 붙여 넣는 것도 번거롭습니다. 이 도구에 이미지를 올리고 원하는 곳을 클릭하면 해당 픽셀의 HEX, RGB, HSL 값을 바로 얻어 CSS, Figma, Canva에 복사할 수 있습니다.

이미지 위에 커서를 올리면 둥근 돋보기가 나타나 커서 주변 9×9 픽셀을 확대하고, 선택된 픽셀을 빨간 테두리로 표시합니다. 사진의 경계나 그라데이션에서는 이웃 픽셀끼리 색이 크게 다를 수 있어, 돋보기를 쓰면 안티에일리어싱이나 노이즈로 생긴 탁한 색을 피하고 원하는 색을 정확히 고를 수 있습니다. 고른 색은 모두 기록에 남아 비교하며 팔레트를 만들 수 있습니다.

색을 고른 뒤에는 아래 WCAG 2.1 대비 검사기에서 전경(글자)색과 배경색을 지정해 대비율과 통과 여부를 확인할 수 있습니다. 일반 텍스트는 AA 4.5:1, AAA 7:1이 필요하고, 큰 텍스트(18pt 이상 또는 14pt 굵게)는 각각 3:1, 4.5:1로 완화됩니다. 브랜드 색에서 버튼이나 제목 색을 만들 때 대비를 먼저 확인하면 노년층, 저시력자, 햇빛이 강한 야외 사용자도 잘 읽을 수 있습니다.

참고로 추출되는 값은 이미지 파일에 저장된 값입니다. 사진은 조명, 화이트 밸런스, 압축의 영향을 받아 같은 제품도 사진마다 코드가 다를 수 있으니, 공식 브랜드 색은 가이드라인 값을 기준으로 하세요. 이미지는 브라우저의 Canvas로만 읽으며 업로드되지 않습니다.