Skip to content
Docs

@hua-labs/ui
v1.2.0

Pro

#3c83f6
Black / White / Transparent

#3b82f6

#21c45d
Black / White / Transparent

#f59f0a
Black / White / Transparent

  • • Tailwind Tab:
  • • Custom Tab:
  • • HEX Input:
  • • Special Colors:
  • • Zero Dependencies:

value*string-docs:components.colorPicker.props.value
onChange*(color: string) => void-docs:components.colorPicker.props.onChange
classNamestring-docs:components.colorPicker.props.className
disabledbooleanfalsedocs:components.colorPicker.props.disabled

docs:common.basicUsagetsx
1import { ColorPicker } from '@hua-labs/hua';
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 -
  • • transparent -

  • •docs:components.colorPicker.accessibility.keyboard: docs:components.colorPicker.accessibility.keyboardDesc
  • •docs:components.colorPicker.accessibility.colorInput: docs:components.colorPicker.accessibility.colorInputDesc
  • •docs:components.colorPicker.accessibility.visualFeedback: docs:components.colorPicker.accessibility.visualFeedbackDesc
UploadTable