BNA

BNA UI
...

Color Picker

PreviousNext

A color picker component with HSV color space selection and swatch display.

Installation

pnpm dlx bna-ui add color-picker

Usage

import { ColorPicker, ColorSwatch } from '@/components/ui/color-picker';
<ColorPicker
  value='#ff0000'
  onColorChange={(color) => console.log('Color changed:', color)}
  onColorSelect={(color) => console.log('Color selected:', color)}
/>

Examples

Default

Different Sizes

With Initial Colors

Disabled State

Color Swatch Only

Custom Styling

Color Palette

With Labels

API Reference

ColorPicker

The main color picker component that displays a swatch and opens a modal for color selection.

PropTypeDefaultDescription
valuestring'#ff0000'The current color value in hex format.
onColorChange(color: string) => void-Callback fired when the color changes during selection.
onColorSelect(color: string) => void-Callback fired when the user confirms color selection.
swatchSizenumberHEIGHTThe size of the color swatch in pixels.
disabledbooleanfalseWhether the color picker is disabled.
styleViewStyle-Additional styles to apply to the container.

ColorSwatch

A standalone color swatch component that can be used independently.

PropTypeDefaultDescription
colorstring-The color to display in hex format.
sizenumber32The size of the swatch in pixels.
styleViewStyle-Additional styles to apply to the swatch.
onPress() => void-Callback fired when the swatch is pressed.

Color Utilities

The component includes several utility functions for color manipulation:

  • hsvToRgb(h, s, v) - Converts HSV values to RGB
  • rgbToHex(r, g, b) - Converts RGB values to hex string
  • hexToRgb(hex) - Converts hex string to RGB values
  • rgbToHsv(r, g, b) - Converts RGB values to HSV

Features

  • HSV Color Space: Uses HSV (Hue, Saturation, Value) color model for intuitive color selection
  • Interactive Gestures: Pan gestures for hue bar and saturation/brightness picker
  • Real-time Preview: Live color preview as you drag the selectors
  • Modal Interface: Full-screen modal with cancel and confirm actions
  • Customizable: Configurable swatch sizes and styling
  • Accessible: Proper contrast and readable color values
  • Smooth Animations: Powered by react-native-reanimated for smooth interactions

Accessibility

The ColorPicker component is built with accessibility in mind:

  • Color values are displayed in uppercase hex format for easy reading
  • High contrast knobs for better visibility
  • Proper touch targets for gesture interactions
  • Modal provides clear cancel and confirm actions
  • Color preview shows the selected color prominently

Notes

  • The component uses expo-linear-gradient for smooth color gradients
  • Gesture handling is powered by react-native-gesture-handler
  • Animations use react-native-reanimated for optimal performance
  • The hue bar uses SVG gradients for precise color representation
  • Color calculations maintain precision across different color spaces
CollapsibleCombobox