Ark UI Color Picker

ArkColorPicker

Picker xây dựng trên @ark-ui/react/color-picker kết hợp Tailwind CSS v4, phân tách màu và hex rõ ràng với đường viền phân cách, tích hợp nút Clear xóa màu, popover có mũi tên (arrow) trỏ vào trigger và đồng bộ kích thước với Input/Button.

Chưa commit

HEX controlled

Giá trị controlled dạng HEX 6 ký tự, phân tách ô màu và hex, có preset và nút Clear.

Brand#2563EB

Alpha channel

Bật allowAlpha để nhập/chọn HEX 8 ký tự, thanh trượt alpha và lưới caro trong suốt.

Overlay#0F172ACC

Preset and eyedropper

Khởi tạo giá trị rỗng (null) với gạch chéo đỏ, có pipette lấy màu từ màn hình và nút Clear xóa màu.

Foldernull

Disabled and invalid

Giữ layout field khi disabled, readOnly hoặc invalid để dùng trong form validation.

Mã màu này không hợp lệ trong cấu hình hệ thống.

Palette hiện tại: #2563EB / #0F172ACC

Đồng bộ kích thước với Input và Button

Mỗi kích thước đều dùng chung biến CSS --control-height, đảm bảo thẳng hàng và khớp tuyệt đối khi đặt cùng hàng.

Extra Small (xs)(28px)

Small (sm)(32px)

Medium (md - mặc định)(36px)

Large (lg)(40px)

Slider only (chỉ dùng thanh trượt)

Điều khiển màu hoàn toàn qua các thanh trượt kênh màu (Red, Green, Blue và Alpha), không cần vùng 2D Area. Tham khảo chuẩn từ Ark UI.

Dạng high-level: ArkColorPicker sliderOnly

prop sliderOnly

Slider only hiển thị inline

hsba(97.1, 89.42%, 81.57%, 1)

Bảng màu mẫu

Slider only dạng Popover kèm Alpha

Inline RGB#5DD016

Popover RGBA#3B82F6CC

Dạng Compound Component (chuẩn Ark UI anatomy)

ArkColorPickerView format="rgba"

Tự do tổ chức giao diện bằng các primitive ArkColorPickerRoot, ArkColorPickerView và ArkColorPickerChannelSlider.

rgba(93, 208, 22, 1)

Form usage inline

Picker hiển thị trực tiếp trong form, hidden input giữ giá trị scalar để submit.

Remix hook form field

ColorPickerField dùng Controller, Field.Root và truyền lỗi/aria-describedby đúng cấu trúc form.

Màu thương hiệu

Field controlled bởi react-hook-form, lưu giá trị scalar HEX có nút Clear.

Màu overlay

Ví dụ allowAlpha với giá trị HEX 8 ký tự và nút Clear.

{
  "_formId": "ark-color-picker-demo-form",
  "brandColor": "#16A34A",
  "overlayColor": "#0F172A99"
}

Tùy biến nâng cao qua Compound Component API

Sử dụng ArkColorPicker.Root, .Control, .Trigger, .ClearTrigger để tùy biến cấu trúc tùy ý.

Thành phần tùy biến độc lậpArkColorPicker.Root

Notifications