색상 팔레트 추출기

Color Palette Extractor는 CSS 스타일시트, SVG 마크업, HTML 파일 또는 일반 텍스트에서 모든 색상 정의(hex 코드(#RRGGBB, #RGB), RGB/RGBA 함수, HSL/HSLA 함수 및 명명된 CSS 색상 파싱)를 스캔한 다음, hex, RGB 및 HSL 표현이 포함된 통합 시각적 팔레트로 제공합니다. 디자인 시스템은 사용 중인 모든 색상에 대한 정확한 문서화가 필요하며, 이 도구는 모든 코드베이스 또는 마크업 파일에 대해 수동 색상 감사를 즉각적인 자동 추출로 대체합니다.

all 변환기 tools 둘러보기

사용 방법

CSS 코드, SVG 마크업, HTML 소스 또는 색상 값이 포함된 텍스트를 입력 영역에 붙여넣습니다. 이 도구는 모든 색상 구문 패턴을 스캔하고 발견된 각 색상을 아래에 hex, RGB 및 HSL 값이 있는 견본으로 렌더링합니다. 견본을 클릭하여 색상 값을 클립보드에 복사하거나 전체 팔레트를 CSS 사용자 정의 속성 목록, JSON 객체 또는 단순 hex 목록으로 내보낼 수 있습니다.

주요 사용 사례

• •CSS 스타일시트에서 모든 색상 값을 추출하여 디자인 시스템 마이그레이션을 위한 포괄적인 디자인 토큰 인벤토리를 생성합니다
• •SVG 아이콘 라이브러리 및 일러스트레이션 파일을 감사하여 사용된 모든 색상을 식별하고 브랜드 색상 준수 여부를 확인합니다
• •디자인 리프레시 전에 팔레트를 통합하기 위해 기존 스타일시트에서 중복에 가까운 유사 색상을 발견합니다
• •디자인 팀 전달 및 브랜드 가이드라인 생성을 위해 기존 frontend 코드에서 색상 참조 문서를 생성합니다
• •접근성 감사를 위해 컴포넌트 CSS에서 전경색과 배경색을 추출하여 WCAG 대비 준수 여부를 확인합니다