ColorPicker

색상을 선택하고 다양한 포맷으로 출력하는 컴포넌트

개요

ColorPicker는 팔레트에서 색상을 선택하거나 색상 코드를 직접 입력할 수 있는 컴포넌트입니다. Popover 형태로 제공되며, 다양한 색상 포맷을 지원합니다.

주요 특징

• ✅ 색상 선택: 팔레트에서 마우스로 색상 선택
• ✅ 색상 코드 입력: HEX, RGB, HSL, OKLCH 코드 직접 입력
• ✅ 색상 미리보기: 선택된 색상 실시간 미리보기 (트리거에 포맷된 값 표시)
• ✅ 투명도 조절: Alpha 채널 조절 지원
• ✅ 색상 포맷: HEX, RGB, HSL, OKLCH 출력 형식
• ✅ EyeDropper: 화면에서 색상 추출 (브라우저 지원 필요)
• ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

기본 사용

<ColorPicker defaultValue="#3b82f6" placeholder="색상 선택" />

투명도 조절

<ColorPicker defaultValue="#ef4444" showAlpha={true} />
<ColorPicker defaultValue="#22c55e" showAlpha={false} />

색상 포맷

<ColorPicker defaultValue="#3b82f6" outputFormat="hex" />
<ColorPicker defaultValue="#3b82f6" outputFormat="rgb" />
<ColorPicker defaultValue="#3b82f6" outputFormat="hsl" />

트리거에 값 표시

색상이 선택되면 트리거에 outputFormat 기반으로 포맷된 색상 값이 표시됩니다. 트리거는 콘텐츠 크기에 맞게 자동 조절되며, triggerClassName으로 너비를 변경할 수 있습니다.

<ColorPicker defaultValue="#3b82f6" outputFormat="hex" placeholder="HEX" />
<ColorPicker defaultValue="#ef4444" outputFormat="rgb" placeholder="RGB" />
<ColorPicker defaultValue="#22c55e" outputFormat="hsl" placeholder="HSL" />

최소 구성

<ColorPicker
  defaultValue="#22c55e"
  showAlpha={false}
  showEyeDropper={false}
  showOutput={false}
  showFormat={false}
/>

API Reference

Props

Events

기본 사용법

import { ColorPicker } from "@vortex/ui-foundation"
 
<ColorPicker defaultValue="#3b82f6" placeholder="색상 선택" />
<ColorPicker
  defaultValue="#ef4444"
  showAlpha={true}
  outputFormat="rgb"
  onChange={(color) => console.log(color)}
/>

접근성

권장 사항

• ✅ 키보드: Tab으로 각 컨트롤 이동, Enter로 Popover 열기/닫기
• ✅ 색상 코드 직접 입력으로 정확한 값 지정 가능
• ✅ 미리보기를 통해 선택 색상 시각적 확인
• ❌ 색상만으로 정보를 전달하지 않도록 주의

관련 컴포넌트

• Input: 텍스트 입력
• Popover: Popover 컨테이너