ColorPicker
색상을 선택하고 다양한 포맷으로 출력하는 컴포넌트
개요
ColorPicker는 팔레트에서 색상을 선택하거나 색상 코드를 직접 입력할 수 있는 컴포넌트입니다. Popover 형태로 제공되며, 다양한 색상 포맷을 지원합니다.
주요 특징
- ✅ 색상 선택: 팔레트에서 마우스로 색상 선택
- ✅ 색상 코드 입력: HEX, RGB, CSS, HSL, OKLCH 코드 직접 입력 (팝오버 내 인풋 필드에서 직접 편집 가능)
- ✅ 색상 미리보기: 선택된 색상 실시간 미리보기 (트리거에 포맷된 값 표시)
- ✅ 투명도 조절: Alpha 채널 조절 지원
- ✅ 색상 포맷: HEX, RGB, CSS, HSL, OKLCH 출력 형식 (투명도 포함 시 자동 반영)
- ✅ EyeDropper: 화면에서 색상 추출 (브라우저 지원 필요)
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 사용
Preview
#3B82F6
투명도 조절
Preview
#EF4444
#22C55E
색상 포맷
Preview
#3B82F6
rgb(59, 130, 246)
hsl(217 91% 60%)
oklch(62.3% 0.188 259.8)
rgb(59, 130, 246)
트리거에 값 표시
색상이 선택되면 트리거에 outputFormat 기반으로 포맷된 색상 값이 표시됩니다. 투명도가 100%가 아닌 경우 alpha 값도 포맷에 포함됩니다. 트리거는 콘텐츠 크기에 맞게 자동 조절되며, triggerClassName으로 너비를 변경할 수 있습니다.
Preview
#3B82F6
rgb(239, 68, 68)
hsl(142 71% 45%)
oklch(60.6% 0.219 292.7)
rgb(245, 158, 11)
최소 구성
Preview
#22C55E
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 색상 값 (제어 컴포넌트) |
defaultValue | string | - | 초기 기본 색상 |
outputFormat | "hex" | "rgb" | "hsl" | "oklch" | "css" | "hex" | 출력 색상 포맷 |
placeholder | string | - | 플레이스홀더 텍스트 |
showAlpha | boolean | true | 투명도 조절 표시 여부 |
showEyeDropper | boolean | true | EyeDropper 버튼 표시 여부 |
showOutput | boolean | true | 색상 코드 입력 필드 표시 |
showFormat | boolean | true | 포맷 선택 버튼 표시 여부 |
selectionHeight | number | string | 200 | 팔레트 영역 높이 |
triggerClassName | string | - | 트리거 버튼 CSS 클래스 |
className | string | - | Popover 콘텐츠 CSS 클래스 |
Events
| Event | Type | Description |
|---|---|---|
onChange | (value: string) => void | 색상 변경 시 호출 |
onOpenChange | (open: boolean) => void | Popover 열림/닫힘 시 |
기본 사용법
import { ColorPicker } from "@vortex/ui-foundation"
<ColorPicker defaultValue="#3b82f6" placeholder="색상 선택" />
<ColorPicker
defaultValue="#ef4444"
showAlpha={true}
outputFormat="rgb"
onChange={(color) => console.log(color)}
/>출력 포맷 예시
투명도(alpha)가 100%가 아닌 경우 각 포맷에 자동으로 포함됩니다.
| 포맷 | alpha = 100% | alpha ≠ 100% (예: 50%) |
|---|---|---|
hex | #FF0000 | #FF000080 |
rgb | rgb(255, 0, 0) | rgb(255 0 0 / 50%) |
hsl | hsl(0 100% 50%) | hsl(0 100% 50% / 50%) |
oklch | oklch(62.8% 0.258 29.2) | oklch(62.8% 0.258 29.2 / 50%) |
css | rgb(255, 0, 0) | rgba(255, 0, 0, 0.50) |
접근성
권장 사항
- ✅ 키보드: Tab으로 각 컨트롤 이동, Enter로 Popover 열기/닫기
- ✅ 색상 코드 직접 입력: 인풋 클릭 후 값 편집, Enter로 확정, Escape로 취소
- ✅ 미리보기를 통해 선택 색상 시각적 확인
- ❌ 색상만으로 정보를 전달하지 않도록 주의
관련 컴포넌트
Last updated on