이미지 색상 추출

온라인 색상 추출기란?

온라인 색상 추출기는 이미지에서 색상을 추출하고, 브라우저가 지원하면 화면에서 추출하며, 수동으로 색상 값을 입력할 수도 있는 무료 도구입니다. 선택한 색상은 HEX, RGB, HSL, HSV, CMYK 등 일반적인 형식으로 즉시 변환되며, 매칭 색상, 밝고 어두운 톤, 텍스트 대비, CSS 변수도 자동 생성되어 디자이너와 프런트엔드 개발자가 바로 복사해 사용할 수 있습니다.

주요 기능

• 이미지에서 추출: 로컬 이미지를 선택한 후 마우스를 올려 픽셀 색상을 미리 보고 클릭하여 선택합니다.
• 픽셀 단위 미세 조정: 색상을 선택한 후 방향키로 인접한 픽셀로 정확하게 이동할 수 있습니다.
• 이미지 팔레트 추출: 이미지에서 주요 색상을 자동으로 추출하며 클릭하여 적용할 수 있습니다.
• 화면에서 추출: 브라우저가 지원하면 시스템 스포이드로 화면의 어느 색상이든 추출할 수 있습니다.
• 수동 입력: 색상 선택기 또는 HEX / HEXA 값 직접 입력을 지원합니다(예: #2563EB).
• 다양한 색상 형식: HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, CMYK 등으로 즉시 변환합니다.
• 매칭 색상 생성: 보색, 유사색, 트라이어드, 소프트 라이트, 저채도 팔레트를 자동 생성합니다.
• 밝고 어두운 톤: 배경, 테두리, 호버 상태, UI 구성 요소에 적합한 실용적인 톤을 생성합니다.
• 텍스트 대비: 흰색과 검은색 텍스트를 WCAG 기준으로 비교하고 APCA 스타일의 지각적 참고값을 제공합니다.
• CSS 변수: 현재 색상, 밝은/어두운 변형, 추천 UI 배색의 CSS 변수를 한 번의 클릭으로 복사합니다.
• 브라우저 내 처리: 추출·팔레트·변환이 모두 브라우저에서 완료되며 이미지는 업로드되지 않습니다.

사용 방법

1. 이미지 탭에서 로컬 이미지를 선택하고 마우스를 올려 색상을 미리 본 후 클릭하여 선택합니다.
2. 또는 화면 탭에서 시스템 스포이드를 사용해 직접 추출합니다.
3. 수동 탭으로 전환하여 HEX 값을 입력하거나 색상 선택기를 사용할 수도 있습니다.
4. 오른쪽 패널에서 필요한 색상 형식, 매칭 색상, 톤 또는 CSS 변수를 복사합니다.