Skip to content
Native Animation
Color Wheel Picker animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add color-wheel-picker
PickerSkia

Color Wheel Picker

React Native Color Picker with HSV Wheel and Swatches

An HSV color picker with a live preview and save flight, with configurable initial color, saved swatches, copy, and fonts.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

This React Native color picker pairs a hue-and-saturation wheel with a separate brightness rail. One HSV shared value coordinates the thumb, notebook preview, ambient light, and hexadecimal output. Select a saved swatch to follow the shortest hue arc, or save the current color with a small flight into the swatch row. Supply initialColor, savedColors, labels, and fonts; use onColorChange to update your theme and onSaveColor to persist a choice after the save flight completes. The component includes a notebook-style preview you can adapt in the copied source.

When to use it

  • Choose an accent color for a workspace.
  • Preview a cover color before saving.
  • Offer reusable saved theme swatches.

An HSV color picker with a live preview and save flight, with configurable initial color, saved swatches, copy, and fonts.

Why this one

Most color wheels stop at a technical picker. This one makes the choice feel useful immediately: the selected color lights the room, dyes a realistic notebook cover, updates the brightness rail, and becomes a saved swatch through a short spatial transition. Saved colors travel along the shortest hue arc instead of snapping across the wheel.

How it works

  1. A Skia SweepGradient supplies hue while a white-to-transparent RadialGradient supplies saturation.
  2. One shared HSV object drives the thumb position, selected color, ambient light, notebook cover, brightness rail, and button.
  3. Gesture Handler maps pointer coordinates into polar hue and saturation values while constraining the thumb to the circle.
  4. The brightness gesture updates the value channel without re-rendering React on every frame.
  5. Saved swatches spring through the shortest angular path; saving launches a small color sample into the row.
  6. An imperative ref exposes selectColor, playIntro, and saveColor for product flows and demo automation.

Install

npx expo install expo-blur expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { ColorWheelPicker } from './ColorWheelPicker';

export function ThemeEditor() {
  return <ColorWheelPicker onColorChange={(hex) => updateTheme(hex)} />;
}
<ColorWheelPicker
  initialColor="#E8A23B"
  notebookTitle="Studio Notes"
  savedColors={['#E8A23B', '#EE6D5A', '#B878E6', '#5879DE', '#39A68B', '#D2C75B']}
  title="Accent color"
  subtitle="Choose a color for your workspace"
/>

Props

PropTypeDefaultDescription
titlestring'Theme color'Editor heading.
subtitlestring'Pick an accent for your notebooks'Supporting editor copy.
notebookTitlestring'Field Notes'Preview notebook title.
saveLabelstring'Save color'Label for the save action.
initialColorstring'#E8A23B'Initial color selected by the wheel.
savedColorsstring[]DEFAULT_COLORSSix or more hexadecimal colors shown in the saved row.
fontFamilystringundefinedMain interface typeface.
mediumFontFamilystringundefinedMedium interface typeface for controls.
titleFontFamilystringundefinedEditorial typeface for the heading and notebook title.
monoFontFamilystringundefinedMonospaced typeface for the live hexadecimal value.
onColorChange(hex: string) => voidundefinedCalled after the selected color changes.
onSaveColor(hex: string) => voidundefinedCalled after the save flight completes.
hueAccessibilityLabelstring'Hue'Screen-reader label for the hue control.
saturationAccessibilityLabelstring'Saturation'Screen-reader label for the saturation control.
brightnessAccessibilityLabelstring'Brightness'Screen-reader label for the brightness control.
styleStyleProp<ViewStyle>undefinedOptional style for the outer container.
testIDstringundefinedTest identifier applied to the outer container.

Ref methods

MethodDescription
selectColor(hex)Springs to a hexadecimal color through the shortest hue arc.
playIntro()Plays the half-wheel signature tour.
saveColor()Launches and saves the current color.
durationnumber

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13, and Skia 2.14.
  • iOS: supported.
  • Android: supported.
  • Web: supported.
  • Works in Expo Go with the SDK-compatible packages listed above.

Accessibility

Hue, saturation, and brightness are separate adjustable controls with increment and decrement actions. Saved colors and the save action have button roles and 44-point hit areas. Reduced Motion replaces the color tour, arcs, springs, and save flight with short fades or direct transitions.

Icons: Lucide (ISC).

FAQ

What color values does this picker return?
The wheel edits hue and saturation, and the rail edits brightness. onColorChange and onSaveColor return hexadecimal color strings. The public API does not expose an alpha channel or an eyedropper.
Can I select or save a color programmatically?
Yes. The ref provides selectColor(hex), saveColor(), and playIntro(). Supply initialColor and savedColors for the initial palette, and persist saved choices through your application callback.
Is the color picker accessible without dragging?
Hue, saturation, and brightness expose separate adjustable controls with increment and decrement actions. Saved swatches and Save have button roles and 44-point hit areas. Reduced Motion replaces tours and flights with short fades or direct transitions.

More animations