Skip to main content

Color Picker

Introduction

An elegant and performant react native color picker for bubble mobile

Features

Intuitive Touch Interface - Smooth gesture-based color selection optimized for mobile screens.

Full Spectrum Picker - Interactive HSV color wheel with saturation/brightness control.

Compact Design - Elegant color preview that expands to full picker modal.

Manual Input - Direct hex color code entry with real-time validation.

Live Updates - Instant color preview, state and event publishing as you select.

Portal Modal - Clean full-screen overlay that doesn't interfere with your app layout.

Precise Control - Fine-tuned color selection with visual feedback indicators.

Performance Optimized - Smooth animations and responsive touch handling.

How to use

  1. Drop the color picker element on the page.
  2. Click color box to customize default color.

Element Fields

  • Initial Color: The initial color value for the picker
  • Border Roundness: The roundness of the border

Exposed States

  • Selected Color: The currently selected color

Events

  • Color is Updated: This event fires when the color is updated

Editor | Preview