이미지에서 색상 선택기

이미지 색상 선택기는 무엇인가요?

이미지에서 색상을 선택하는 방법

1. 1
   이미지를 드롭하세요

   JPG, PNG, WebP, GIF 또는 BMP 파일을 업로드 영역으로 드래그하거나 장치에서 선택하려면 클릭하세요. 이미지는 미리 보기 비율로 작업 공간에 렌더링되지만, 픽셀 샘플링은 원본 해상도 복사본에 대해 발생합니다.

2. 2
   색상을 미리 보려면 마우스를 올리세요

   이미지 위로 커서를 이동하세요. 확대된 루프가 커서 위에 나타나며, 8배 확대하여 정확한 픽셀을 보여주고 중앙에 1픽셀 마커가 있습니다. 캔버스 아래의 커서 색상 카드가 HEX, RGB 및 HSL로 실시간 업데이트됩니다.

3. 3
   색상을 팔레트에 추가하려면 클릭하세요

   팔레트에 색상을 추가하려면 아무 픽셀이나 클릭하세요. 중복은 자동으로 건너뛰므로 목록이 부풀어 오르지 않도록 안전하게 클릭할 수 있습니다. 하나의 팔레트에는 최대 20가지 색상이 들어갑니다.

4. 4
   한 번의 클릭으로 값을 복사하세요

   팔레트에서 HEX, RGB 또는 HSL을 클릭하여 클립보드에 복사하세요. 스와치를 클릭하면 HEX를 복사합니다. 전체 팔레트는 CSS 사용자 정의 속성 블록(--color-1, --color-2, …)으로도 내보낼 수 있습니다.

5. 5
   재설정하고 다른 이미지를 시도하세요

   새 이미지를 클릭하여 작업 공간을 지우고 다른 파일을 로드하세요. 팔레트 카드 내에서 지우기를 사용하여 이미지는 유지하되 팔레트를 다시 시작할 수 있습니다.

브라우저 픽셀 샘플링 작동 방식

1. new Image()로 소스 파일을 디코딩합니다 — 브라우저는 JPG/PNG/WebP/GIF/BMP를 기본적으로 처리합니다.
2. 원본 해상도 이미지를 오프스크린 캔버스에 그립니다.
3. 보이는 캔버스에 축소된 미리 보기를 렌더링합니다 (긴 쪽에서 최대 900px).
4. 마우스를 올리면 미리 보기 공간에서 소스 공간 좌표로 커서 (x,y)를 매핑합니다.
5. getImageData(sx, sy, 1, 1)로 픽셀을 읽습니다 → [R, G, B, A].
6. HEX (R/G/B를 2자리 헥사로) 및 HSL (rgbToHsl)로 변환합니다.

참조: MDN — CanvasRenderingContext2D.getImageData

일반적인 색상 선택 작업

이미지 색상 선택기를 사용할 때

• CSS 변수 팔레트를 만들기 위해 로고 PNG에서 브랜드 색상을 추출합니다.
• 디자인 사이트의 스크린샷을 Figma를 열지 않고 스타일시트와 일치시킵니다.
• 페인팅, 뜨개질 또는 3D 텍스처 작업을 위해 사진에서 5-7 색상 참조 팔레트를 뽑아냅니다.
• 렌더러가 생성한 정확한 색상을 확인합니다 — 스크린샷이 '이상해 보일' 때 유용하지만 이유를 알 수 없을 때.
• 프레젠테이션 덱을 위해 무드보드나 영감 스크린샷에서 색상을 샘플링합니다.
• 재디자인을 위해 실제 사진(하늘색, 테라코타 등)에서 페인트 또는 패브릭 색상을 선택합니다.
• 주요 이미지에서 직접 테마 팔레트를 만들어 주변 UI가 시각적으로 통일감을 느끼게 합니다.

관련 도구

자주 묻는 질문