이미지에서 HEX 색상 추출하기

사진을 업로드하고 원하는 픽셀을 클릭하여 HEX 색상 코드를 바로 추출해 보세요. CSS나 HTML에 바로 붙여넣을 수 있습니다.

이미지를 드래그한 후 마우스를 올려 색상을 추출해 보세요.

업로드된 이미지는 사용자의 기기에만 머무르며, 브라우저 내에서 처리되어 BroBroGo 서버로 절대 전송되지 않습니다.

자주 묻는 질문

이미지에 있는 색상의 HEX 코드를 어떻게 추출하나요?

이미지를 업로드한 후 마우스를 가져가거나 원하는 픽셀을 클릭하세요. 돋보기 창이 있어 정확한 위치를 쉽게 조준할 수 있습니다. 클릭 한 번으로 HEX 코드(예: #4f46e5)가 즉시 복사됩니다.

HEX 색상 코드란 무엇인가요?

HEX 코드는 '#' 기호 뒤에 빨간색(R), 초록색(G), 파란색(B)을 나타내는 6자리의 16진수 숫자를 붙여 색상을 표현하는 방식입니다 (예: #4f46e5). CSS, HTML 및 대부분의 디자인 도구에서 널리 사용되는 형식입니다.

HEX 코드 외에 RGB와 HSL 값도 확인할 수 있나요?

네, 가능합니다. 추출하는 모든 픽셀의 HEX 코드와 함께 RGB 및 HSL 값도 표시되며, 클릭 한 번으로 간편하게 복사할 수 있습니다.

이 페이지의 특징: HEX 중심 색상 추출 도구

이 페이지는 이미지에서 픽셀을 선택하면 그 색상을 6자리 HEX 코드(예: #1E90FF)로 즉시 보여준다. HEX 코드는 CSS의 color, background-color 등에 괄호나 추가 구문 없이 바로 입력할 수 있는 웹 표준 형식이다. 같은 기능을 하는 다른 페이지(RGB 함수형 표기법 중심, HSL 중심)와 달리 이 페이지는 HEX를 주 출력으로 삼는다. HEX는 6자리 표기에서 알파 채널을 포함하지 않으므로, 반투명 픽셀의 투명도는 별도로 Alpha ‹n›% – 이 픽셀은 부분적으로 투명합니다.라고 표시한다. RGB와 HSL 값도 함께 제공하지만, 복사 버튼을 누르면 세 형식 중 어느 것이든 클립보드에 복사된다.

입력과 출력: 지원 형식과 표시되는 정보

입력은 PNG, JPG, WebP, GIF, AVIF, HEIC 형식의 이미지 파일 하나다. 허용 MIME 타입은 image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif이다. 이미지의 가장 긴 변이 4096픽셀을 초과하면 자동으로 축소된다. 지원되지 않는 형식을 드롭하면 *"그 파일 형식은 지원되지 않습니다. PNG, JPG, WebP, GIF, AVIF 또는 HEIC 이미지를 시도해 보세요."*라는 메시지가 표시된다. 이미지를 열 수 없으면 *"해당 이미지를 열 수 없습니다. 손상되었거나 지원되지 않는 형식일 수 있습니다."*라고 알린다.

출력은 다음과 같다:

  • 이미지 준비 완료 메시지: "이미지 준비 완료 — 위로 마우스를 이동하여 색상을 샘플링하고, 클릭하여 저장하세요."
  • 이미지 크기 (너비 × 높이)
  • 현재 샘플링된 픽셀의 좌표 (x, y)
  • HEX: 16진수 색상 코드 (6자리, 예: #1E90FF)
  • RGB: Red, Green, Blue 값
  • HSL: Hue, Saturation, Lightness 값
  • 반투명 픽셀인 경우: "Alpha ‹n›% — 이 픽셀은 부분적으로 투명합니다."
  • 클릭 시: "Saved ‹hex› to your picks."
  • 저장된 색상 기록: 최대 12개, 각 항목은 HEX, RGB, HSL 값과 함께 표시되며 스와치를 클릭하면 해당 색상이 다시 로드됨
  • HEX, RGB, HSL 값 중 아무 것이나 클릭하면 클립보드에 복사됨. 브라우저가 차단하면 "Could not copy — your browser blocked clipboard access." 표시

작동 방식: 이미지 로드, 마우스/키보드 조작, 돋보기

이미지를 로드하면 중앙 픽셀의 색상 값과 좌표가 즉시 표시된다. 마우스를 이미지 위로 움직이면 픽셀 단위로 색상이 샘플링되며, 확대된 돋보기 뷰로 정확한 픽셀을 선택할 수 있다. 클릭하면 현재 샘플링된 색상이 기록에 저장된다.

키보드로도 조작 가능하다: 방향키로 십자선을 이동하며 샘플링하고, Shift 키를 누른 상태에서 방향키를 누르면 10픽셀씩 이동한다. Enter 또는 Space를 누르면 현재 색상을 저장한다. 이는 마우스 사용이 어려운 사용자나 정밀한 픽셀 선택이 필요한 경우 유용하다. 돋보기는 이미지의 특정 영역을 확대해 안티앨리어싱이나 압축으로 인해 인접 픽셀 값이 미세하게 다른 상황에서 정확한 픽셀을 집을 수 있게 도와준다.

저장 기능과 색상 기록: 최대 12개, 중복 구분

저장된 색상은 최대 12개까지 기록된다. 동일한 RGB 값이라도 알파 값이 다르면 별도 항목으로 저장된다. 즉, 완전 불투명한 빨강(alpha=100%)과 반투명한 빨강(alpha=50%)은 서로 다른 기록이 된다. 기록의 각 스와치를 클릭하면 해당 색상이 다시 활성화되어 HEX, RGB, HSL 값이 표시된다. 이는 여러 색상을 추출해 비교하거나 디자인 팔레트를 구성할 때 편리하다. "Start over" 버튼을 누르면 이미지와 색상 기록이 모두 초기화된다.

제한 사항과 에지 케이스: JPEG 압축, 안티앨리어싱, 반투명 픽셀

  • 이미지가 JPEG이거나 스크린샷인 경우, 압축과 안티앨리어싱으로 인해 실제 픽셀 값이 원본과 다를 수 있다. 예를 들어 단색 배경처럼 보이는 영역에서도 인접 픽셀 간 미세한 차이가 발생할 수 있으므로 샘플링 지점 선택이 중요하다.
  • 반투명 픽셀은 그 뒤에 있는 배경을 고려하지 않고 픽셀 자체의 저장된 값을 그대로 읽는다. HEX 코드는 알파 정보를 포함하지 않으므로 반투명 픽셀의 HEX 값은 불투명한 상태의 RGB 값만 나타낸다. 투명도는 별도 메시지로 표시된다.
  • 지원되지 않는 파일 형식을 드롭하면 오류 메시지가 표시된다. 이미지가 손상되었거나 형식이 호환되지 않으면 동일하게 처리된다.
  • 긴 변이 4096픽셀을 초과하는 이미지는 성능과 정확성을 위해 강제로 축소된다. 이로 인해 일부 픽셀 정보가 손실될 수 있다.

FAQ

Q1: HEX 코드가 RGB와 다른 점은 무엇인가요?
HEX는 RGB 값을 16진수로 표현한 것입니다. 예를 들어 RGB(30,144,255)는 #1E90FF가 됩니다. CSS에서 괄호 없이 바로 사용할 수 있어 코드가 간결합니다. 이 페이지는 6자리 HEX를 기본 출력으로 제공합니다.

Q2: 반투명 픽셀의 투명도는 어떻게 표시되나요?
HEX 코드에는 알파 정보가 포함되지 않습니다. 대신 *"Alpha 50% — 이 픽셀은 부분적으로 투명합니다."*와 같은 문구로 알파 값을 백분율로 표시합니다. 불투명한 픽셀(alpha=100%)은 별도 메시지가 없습니다.

Q3: 키보드로 색상을 샘플링할 수 있나요?
가능합니다. 방향키로 십자선을 이동하고 Shift 키를 누르면 10픽셀씩 점프합니다. Enter 또는 Space를 누르면 현재 색상이 저장됩니다.

Q4: 저장할 수 있는 색상 개수에 제한이 있나요?
최대 12개까지 저장됩니다. 같은 RGB 값이라도 알파 값이 다르면 별도 항목으로 기록됩니다. 초기화하려면 "Start over" 버튼을 사용하세요.

Q5: JPEG 이미지에서 색상을 추출할 때 주의할 점은?
JPEG는 손실 압축을 사용하므로 원본 색상이 변형될 수 있습니다. 특히 부드러운 그라데이션 영역에서는 인접 픽셀 값이 미세하게 달라집니다. 돋보기 기능을 사용해 원하는 픽셀을 정확히 선택하는 것이 중요합니다.

Q6: HEX 값을 복사할 때 오류가 발생하면 어떻게 하나요?
브라우저가 클립보드 접근을 차단할 수 있습니다. 이 경우 "Could not copy — your browser blocked clipboard access." 메시지가 표시됩니다. 수동으로 HEX 코드를 선택해 복사해 보세요.

이미지 색상 추출기이미지에서 원하는 픽셀을 선택해 HEX, RGB, HSL 색상 코드를 확인해 보세요. 돋보기 기능으로 정밀하게 조준할 수 있습니다.색상 변환기HEX, RGB, HSL, HSV, CMYK, LAB 간 색상 변환 — 한 필드를 수정하면 나머지도 실시간으로 자동 업데이트됩니다.웹 접근성 명도 대비 검사기텍스트 색상과 배경 색상을 입력하여 WCAG 명도 대비 비율과 AA/AAA 통과 여부를 실시간으로 확인해 보세요.