ColorPicker

@hua-labs/ui

v1.2.0

Tailwind CSS 프리셋과 커스텀 HSL 피커가 있는 탭 기반 컬러 피커입니다. 외부 의존성이 없습니다.

Pro

라이브 데모

기본 컬러 피커

#3c83f6

Black / White / Transparent

선택된 색상

#3b82f6

Custom 탭 - HSL 선택기

#21c45d

Black / White / Transparent

Custom 탭에서 2D 박스를 드래그하거나 Hue 슬라이더를 조절하세요

비활성화 상태

#f59f0a

Black / White / Transparent

주요 기능

• Tailwind Tab: 15가지 색상 × 10단계 프리셋 팔레트
• Custom Tab: 2D Saturation/Lightness 박스 + Hue 슬라이더
• HEX Input: 직접 HEX 코드 입력 가능
• Special Colors: Black, White, Transparent 지원
• Zero Dependencies: 외부 라이브러리 의존성 없음

Props

이름	타입	기본값	설명
`value*`	`string`	-	현재 색상 값 (HEX 또는 'transparent')
`onChange*`	`(color: string) => void`	-	색상 변경 콜백
`className`	`string`	-	추가 CSS 클래스
`disabled`	`boolean`	`false`	비활성화 상태

코드 예시

docs:common.basicUsagetsx

1import { ColorPicker } from '@hua-labs/ui/form';
2import { useState } from 'react';
3 
4function Example() {
5  const [color, setColor] = useState("#3b82f6");
6 
7  return (
8    <ColorPicker
9      value={color}
10      onChange={setColor}
11    />
12  );
13}

docs:components.colorPicker.examples.tailwindPresettsx

1// Tailwind CSS 컬러 팔레트 프리셋
2// 15가지 색상 × 10단계 (gray, red, orange, ... rose)
3// 특수 색상: black, white, transparent
4 
5<ColorPicker
6  value={color}
7  onChange={setColor}
8/>

docs:components.colorPicker.examples.customHsltsx

1// Custom 탭에서 HSL 기반 색상 선택
2// - 2D Saturation/Lightness 박스
3// - Hue 슬라이더
4// - HEX 입력 필드
5 
6<ColorPicker
7  value={color}
8  onChange={(newColor) => {
9    console.log('Selected:', newColor);
10    setColor(newColor);
11  }}
12/>

docs:components.colorPicker.examples.disabledtsx

1<ColorPicker
2  value="#f59e0b"
3  onChange={setColor}
4  disabled
5/>

색상 포맷

• #RRGGBB - 6자리 HEX 코드
• transparent - 투명 색상

접근성

•키보드 탐색: Tab으로 탭과 컨트롤 간 이동
•색상 입력: 정확한 색상 선택을 위한 HEX 직접 입력
•시각적 피드백: 선택된 색상 링 표시

Upload Table