컬러 피커
색상 선택, 이미지에서 추출, 팔레트 생성, 대비 확인. HEX, RGB, HSL, HSV, CMYK 형식 지원.
이미지 색상 추출
이미지를 드롭하거나 클릭하여 업로드
주요 색상
팔레트에 색상을 추가하세요
일반 크기 샘플 텍스트 (14px)
큰 샘플 텍스트
대비 비율
21:1
AA 일반
통과
AA 크게
통과
AAA 일반
통과
AAA 크게
통과
90°
이 컬러 피커 활용 시기
무료 컬러 피커 도구로 디자이너와 개발자의 색상 작업 지원:
-
웹 디자인
웹사이트에 완벽한 색상을 선택하고 접근성 준수를 위해 대비 비율을 확인하세요.
-
브랜드 아이덴티티
로고, 마케팅 자료, 브랜드 가이드라인을 위한 조화로운 색상 팔레트를 만드세요.
-
이미지 색상 매칭
사진에서 색상을 추출하여 기존 이미지와 디자인 요소를 매칭하세요.
-
CSS 개발
CSS 그라디언트를 생성하고 색상 팔레트를 CSS 사용자 정의 속성으로 내보내세요.
-
접근성 테스트
텍스트와 배경색 조합이 WCAG AA 및 AAA 표준을 충족하는지 확인하세요.
컬러 피커 사용 방법
시작하기
- 색상 사각형을 클릭하고 드래그하여 채도와 명도 선택
- 색조 슬라이더로 기본 색상 변경
- 필요시 알파 슬라이더로 불투명도 조정
- 복사 버튼을 클릭하여 원하는 형식 복사
기능
- 실시간 미리보기가 있는 인터랙티브 컬러 피커
- 스포이트로 모든 이미지에서 색상 추출
- 자동으로 조화로운 색상 조합 생성
- 사용자 정의 팔레트 구축 및 CSS 또는 JSON으로 내보내기
- 접근성을 위한 WCAG 색상 대비 확인
- 비주얼 에디터로 CSS 그라디언트 생성
키보드 단축키
- Ctrl+C: 현재 HEX 색상 복사
- Ctrl+V: 클립보드에서 색상 붙여넣기 및 적용
- 1-4: 기능 탭 간 전환
팁
- 이미지를 업로드하면 주요 색상이 자동으로 추출됩니다
- 대비 검사기로 텍스트 가독성 확인
- 팔레트를 CSS 변수로 내보내 프로젝트에서 쉽게 사용