howToHeading
- "이미지 선택"을 클릭하거나, 이미지를 드래그 앤 드롭하거나, Ctrl+V / Cmd+V를 눌러 스크린샷을 붙여넣으세요.
- 이미지 위에서 마우스나 손가락을 이동하여 실시간 HEX, RGB, HSL 색상 값과 돋보기 미리보기를 확인하세요.
- 원하는 위치를 클릭하면 색상이 기록에 저장됩니다.
- "주요 색상 추출"을 클릭하여 디자인용 팔레트를 생성하고 필요한 색상 값을 복사하세요.
활용 예시: 제품 스크린샷을 붙여넣고 메인 버튼 색상을 추출하여 HEX 값을 CSS나 디자인 파일에 바로 복사하세요.
featuresHeading
- 로컬 이미지 색상 추출: 이미지는 브라우저 Canvas에서만 렌더링되며 서버로 절대 업로드되지 않습니다.
- 픽셀 수준의 HEX/RGB/HSL: 마우스나 손가락을 이동하여 현재 픽셀의 HEX, RGB, HSL 색상 값을 실시간으로 확인할 수 있습니다.
- 돋보기 십자선 보조: 부분 확대 미리보기를 통해 아이콘 가장자리, UI 스크린샷 세부 정보 및 작은 색상 블록을 정확하게 조준할 수 있습니다.
- 주요 색상 팔레트 생성: 브라우저 내에서 픽셀을 샘플링하여 디자인 참고용으로 최대 5개의 주요 색상을 추출합니다.
- 빠른 저장 및 복사: 이미지를 클릭하여 추출한 색상을 기록에 저장하고, 색상 견본을 클릭하여 코드를 즉시 복사하세요.
relatedHeading
2026 최신 FIRE 재무 자유 계산기(물가상승률 반영). 브라우저 로컬에서 실제 구매력을 시뮬레이션하고, 은퇴 자금 부족액을 분석하여 연간 자산 계획을 세우세요. 엑셀이나 Notion 대시보드를 위한 CSV 원클릭 내보내기를 지원합니다.
계좌 잔고, 리스크 %, 진입가 및 손절가를 기반으로 트레이딩 포지션 규모를 계산하세요. 데이터 업로드 없이 브라우저 로컬에서 실행되므로 거래 전 리스크 시나리오를 비교할 수 있습니다.
초기 원금, 정기 투자액, 연간 수익률(APY) 및 투자 기간을 입력하여 복리 성장을 계산하세요. 브라우저 내에서 원금, 이자 및 최종 잔액을 인터랙티브 차트로 시각화합니다.
대출 계산기 / 모기지 계산기를 사용하여 브라우저 로컬에서 월 상환액, 총 이자 및 상환 일정표를 추정해 보세요. 대출 금액, 이자율 및 기간을 입력하면 차트와 함께 결과를 즉시 확인할 수 있습니다.
이 투자 계산기 / ROI 계산기를 사용하여 초기 원금, 매월 정기 투자액, 연간 수익률 및 물가상승률을 반영한 결과를 브라우저 로컬에서 추정하세요. 실시간 복리 차트, ROI 및 연간 세부 일정을 통해 예상 수익을 확인할 수 있습니다.
APR to APY Calculator를 사용하여 브라우저에서 로컬로 APR과 APY를 양방향 변환하세요. 금리를 입력하고 복리 주기를 선택하면 실효 연이율, 차이, 주기별 비교표를 즉시 확인할 수 있습니다.
이 이익률 계산기를 사용하여 브라우저 로컬에서 매출 총이익, 마크업, 마진 및 판매 가격을 계산하세요. 원가와 판매가, 또는 원가와 목표 마진을 입력하면 지표가 즉시 계산됩니다.
이 CPM 및 CPC 계산기를 사용하여 광고 비용, 노출수, 클릭수, CPM, CPC 및 CTR을 브라우저에서 로컬로 추정하세요. 예산과 목표 단가를 입력하여 캠페인 시나리오를 즉시 계획할 수 있습니다.
logicHeading
이 도구는 HTML5 Canvas를 사용하여 브라우저 로컬에서 이미지를 디코딩하며, getImageData를 통해 피커 좌표의 RGBA 픽셀 값을 읽어옵니다. HEX, RGB, HSL 값은 모두 이 픽셀 데이터를 실시간으로 변환하여 얻습니다.
주요 색상 추출 기능은 일정한 간격으로 Canvas 픽셀을 샘플링하여 비슷한 색상을 단순한 색상 버킷으로 그룹화하고, 빈도순으로 정렬하여 최대 5개의 색상을 출력합니다. 이 결과는 웹 및 디자인 참고용으로 유용하지만, 전문적인 사진 작업의 ICC / P3 절대 색상 관리를 보장하지는 않습니다.
faqHeading
이미지가 서버로 업로드되나요?
아니요. 이미지 로드, 색상 추출, 돋보기 미리보기 및 팔레트 생성 등 모든 과정은 사용자의 브라우저 로컬에서만 안전하게 실행됩니다.
이미지에서 HEX 색상을 어떻게 추출하나요?
이미지를 선택하거나 붙여넣은 후, 마우스나 손가락을 대상 픽셀로 이동하세요. 현재 색상이 실시간으로 표시됩니다. 이미지를 클릭하여 기록에 저장하고, 색상 견본을 클릭하여 HEX 값을 복사하세요.
지원되는 색상 포맷은 무엇인가요?
웹 디자인과 프론트엔드 개발에서 가장 널리 사용되는 HEX, RGB, HSL 포맷을 표시하고 복사할 수 있습니다.
왜 Photoshop의 색상과 미세하게 다를 수 있나요?
Canvas는 현재 브라우저가 실제로 렌더링한 픽셀 값을 읽어옵니다. 따라서 브라우저 렌더링 방식, 모니터의 색 영역, 이미지에 포함된 컬러 프로파일(ICC) 등에 따라 미세한 차이가 발생할 수 있습니다.
모바일 기기에서도 색상을 추출할 수 있나요?
네, 가능합니다. 터치스크린 기기에서는 손가락으로 이미지를 드래그하여 십자선을 이동시킬 수 있으며, 손을 떼거나 탭하면 색상을 고정하여 저장할 수 있습니다.