Color Picker

A cross-platform React color picker component with a visual selection area, format switching, and color value controls.

Installation

npm install @xsolla/xui-color-picker

Demo

Basic Color Picker

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";

export default function BasicColorPicker() {
  const [color, setColor] = React.useState("#66E6FFFF");

  return (
    <ColorPicker
      value={color}
      onChange={({ valueInInitialFormat }) => setColor(valueInInitialFormat)}
    />
  );
}

Without Alpha Channel

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";

export default function NoAlpha() {
  return <ColorPicker value="#FF5733" alpha={false} onChange={console.log} />;
}

With Eyedropper

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";

export default function WithEyedropper() {
  return <ColorPicker value="#3498DB" eyedropper onChange={console.log} />;
}

Anatomy

import { ColorPicker } from "@xsolla/xui-color-picker";

<ColorPicker
  value="#66E6FFFF" // Initial color value
  colorFormat="hex" // Default format (hex, rgb, hsl, hsb)
  alpha={true} // Show alpha slider
  eyedropper={false} // Show eyedropper button
  selectableFormats={["hex", "hsl", "rgb", "hsb"]} // Available formats
  onChange={handleChange} // Change callback
  bottomContent={<Custom />} // Custom content below controls
/>;

Examples

Custom Format Selection

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";

export default function CustomFormats() {
  return (
    <ColorPicker
      value="#FF0000"
      colorFormat="rgb"
      selectableFormats={["rgb", "hex"]}
      onChange={({ valueInCurrentFormat, currentColorFormat }) => {
        console.log(`${currentColorFormat}: ${valueInCurrentFormat}`);
      }}
    />
  );
}

With Bottom Content

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";
import { Button } from "@xsolla/xui-button";

export default function WithBottomContent() {
  const [color, setColor] = React.useState("#66E6FFFF");

  return (
    <ColorPicker
      value={color}
      onChange={({ valueInInitialFormat }) => setColor(valueInInitialFormat)}
      bottomContent={
        <Button size="sm" onPress={() => console.log("Applied:", color)}>
          Apply Color
        </Button>
      }
    />
  );
}

Controlled Color Picker

import * as React from "react";
import { ColorPicker } from "@xsolla/xui-color-picker";

export default function ControlledPicker() {
  const [color, setColor] = React.useState("#9B59B6FF");

  const handleChange = ({
    valueInInitialFormat,
    valueInCurrentFormat,
    currentColorFormat,
  }) => {
    console.log("Format:", currentColorFormat);
    console.log("Current format value:", valueInCurrentFormat);
    console.log("Initial format value:", valueInInitialFormat);
    setColor(valueInInitialFormat);
  };

  return (
    <div>
      <p>Selected: {color}</p>
      <ColorPicker value={color} onChange={handleChange} />
    </div>
  );
}

API Reference

ColorPicker

ColorPickerProps:

| Prop | Type | Default | Description | | :---------------- | :---------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------ | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | value | string | "#66E6FFFF" | Color value in any supported format. | | colorFormat | "hex" \| "rgb" \| "hsl" \| "hsb" | "hex" | Default color format for output. | | alpha | boolean | true | Show alpha channel slider. | | eyedropper | boolean | false | Show eyedropper tool (web only). | | selectableFormats | Array<"hex" \| "rgb" \| "hsl" \| "hsb"> | All formats | Available formats in dropdown. | | copiedIcon | ReactNode | - | Custom icon for copied state. | | bottomContent | ReactNode | - | Custom content below color controls. | | onChange | (result: ColorChangeResult) => void | - | Callback when color changes. | | testID | string | - | Test identifier. |

ColorChangeResult:

interface ColorChangeResult {
  valueInInitialFormat: string; // Color in original format
  valueInCurrentFormat: string; // Color in selected format
  currentColorFormat: "hex" | "rgb" | "hsl" | "hsb";
}

Supported Formats

| Format | Example | With Alpha | | :----- | :------------------- | :----------------------- | | hex | #FF5733 | #FF5733FF | | rgb | rgb(255, 87, 51) | rgba(255, 87, 51, 1) | | hsl | hsl(11, 100%, 60%) | hsla(11, 100%, 60%, 1) | | hsb | hsb(11, 80%, 100%) | hsba(11, 80%, 100%, 1) |

Features

• Visual picker: Click and drag on the color area to select hue/saturation
• Sliders: Hue and alpha channel sliders
• Format switching: Toggle between hex, RGB, HSL, HSB via dropdown
• Copy button: Copy current color value to clipboard
• Reset button: Reset to initial color value
• Eyedropper: Pick colors from anywhere on screen (web only, requires browser support)

Accessibility

• Copy and reset buttons have accessible labels
• Keyboard navigation supported for all controls
• Color values are displayed in text inputs for manual entry