Color Picker Usage

사용자가 색상 값을 입력할 수 있도록 돕습니다.

Layout

Spacing

필드는 텍스트 레이블과 spacing/100 간격을 두고 배치합니다. 필드와 validation message 또는 helper text 와의 간격에는 spacing/50을 적용합니다.

Sizing

Color picker의 입력 필드는 small과 medium 두 가지 사이즈 옵션으로 제공되며, 사용 맥락에 따라 유연하게 너비를 조정할 수 있습니다.

색상을 선택할 때 표시되는 palette popover는 단일 사이즈로만 제공되며, 256px의 고정 너비를 유지합니다.

✓DoRequired

Palette popover는 필드 너비와 무관하게 고정된 너비로 표출합니다.

✕Don'tRequired

Palette popover의 너비를 임의로 조정하지 않습니다.

Content

Color Preset

빠른 컬러 입력을 위해 popover 내에서 프리셋 컬러를 제공할 수 있습니다. Color picker를 선택하면 해당 색상이 입력되고 popover는 종료됩니다.

Behaviors

Input Format

사용자가 특정 값을 popover에서 직접 입력할 수 있습니다. HEX 코드와 RGB 값 입력을 지원합니다.