Comprehensive color selection and manipulation components with multiple input methods, color spaces, and formatting support.
Complete color selection component with multiple input methods and color space support.
/**
* Complete color picker with multiple input methods
* @param props - ColorPicker configuration and color properties
* @returns JSX element as comprehensive color picker
*/
function ColorPicker(props: SpectrumColorPickerProps): JSX.Element;
interface SpectrumColorPickerProps extends DOMProps, StyleProps {
/** Color picker label */
label?: React.ReactNode;
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** Color channel to control */
channel?: ColorChannel;
/** Description text */
description?: React.ReactNode;
/** Error message */
errorMessage?: React.ReactNode;
/** Whether picker is disabled */
isDisabled?: boolean;
/** Whether picker is required */
isRequired?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Color change end handler */
onChangeEnd?: (color: Color) => void;
}2D color selection area for hue/saturation or other color channel combinations.
/**
* 2D color selection area for hue/saturation selection
* @param props - ColorArea configuration and channel properties
* @returns JSX element as 2D color picker area
*/
function ColorArea(props: SpectrumColorAreaProps): JSX.Element;
interface SpectrumColorAreaProps extends DOMProps, StyleProps {
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** X-axis color channel */
xChannel?: ColorChannel;
/** Y-axis color channel */
yChannel?: ColorChannel;
/** Whether area is disabled */
isDisabled?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Color change end handler */
onChangeEnd?: (color: Color) => void;
}Circular hue/saturation color picker wheel.
/**
* Circular color wheel for hue and saturation selection
* @param props - ColorWheel configuration and color properties
* @returns JSX element as circular color picker
*/
function ColorWheel(props: SpectrumColorWheelProps): JSX.Element;
interface SpectrumColorWheelProps extends DOMProps, StyleProps {
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** Whether wheel is disabled */
isDisabled?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Color change end handler */
onChangeEnd?: (color: Color) => void;
}Linear slider for selecting individual color channel values.
/**
* Linear slider for individual color channel selection
* @param props - ColorSlider configuration and channel properties
* @returns JSX element as color channel slider
*/
function ColorSlider(props: SpectrumColorSliderProps): JSX.Element;
interface SpectrumColorSliderProps extends DOMProps, StyleProps {
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** Color channel to control */
channel?: ColorChannel;
/** Slider orientation */
orientation?: "horizontal" | "vertical";
/** Whether slider is disabled */
isDisabled?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Color change end handler */
onChangeEnd?: (color: Color) => void;
}Text input for entering color values in various formats.
/**
* Text input for entering color values in various formats
* @param props - ColorField configuration and format properties
* @returns JSX element as color text input
*/
function ColorField(props: SpectrumColorFieldProps): JSX.Element;
interface SpectrumColorFieldProps extends DOMProps, StyleProps {
/** Color field label */
label?: React.ReactNode;
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** Placeholder text */
placeholder?: string;
/** Description text */
description?: React.ReactNode;
/** Error message */
errorMessage?: React.ReactNode;
/** Whether field is disabled */
isDisabled?: boolean;
/** Whether field is required */
isRequired?: boolean;
/** Auto-focus the field */
autoFocus?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Focus change handler */
onFocusChange?: (isFocused: boolean) => void;
}Display component for showing a color sample with optional selection capability.
/**
* Color swatch display with optional selection capability
* @param props - ColorSwatch color and interaction properties
* @returns JSX element as color swatch
*/
function ColorSwatch(props: SpectrumColorSwatchProps): JSX.Element;
interface SpectrumColorSwatchProps extends DOMProps, StyleProps {
/** Color to display */
color: Color | string;
/** Swatch size */
size?: "XS" | "S" | "M" | "L";
/** Border radius */
rounding?: "none" | "default" | "full";
/** Whether swatch is disabled */
isDisabled?: boolean;
/** Whether swatch is selected */
isSelected?: boolean;
/** Press handler for selection */
onPress?: () => void;
}Grid of color swatches for selecting from predefined colors.
/**
* Grid of color swatches for selecting from predefined colors
* @param props - ColorSwatchPicker configuration and color properties
* @returns JSX element as color swatch picker
*/
function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps): JSX.Element;
interface SpectrumColorSwatchPickerProps extends DOMProps, StyleProps {
/** Available colors */
colors: (Color | string)[];
/** Currently selected color */
value?: Color | string;
/** Default selected color */
defaultValue?: Color | string;
/** Swatch size */
size?: "XS" | "S" | "M" | "L";
/** Border radius for swatches */
rounding?: "none" | "default" | "full";
/** Number of columns in grid */
columns?: number;
/** Whether picker is disabled */
isDisabled?: boolean;
/** Color selection handler */
onChange?: (color: Color) => void;
}Advanced color editor with multiple input methods and color space controls.
/**
* Advanced color editor with multiple input methods
* @param props - ColorEditor configuration and feature properties
* @returns JSX element as comprehensive color editor
*/
function ColorEditor(props: SpectrumColorEditorProps): JSX.Element;
interface SpectrumColorEditorProps extends DOMProps, StyleProps {
/** Current color value */
value?: Color;
/** Default color value */
defaultValue?: Color | string;
/** Include alpha channel control */
includeAlpha?: boolean;
/** Color format for display */
format?: ColorFormat;
/** Available color formats */
formatOptions?: ColorFormat[];
/** Color space to use */
colorSpace?: ColorSpace;
/** Whether editor is disabled */
isDisabled?: boolean;
/** Color change handler */
onChange?: (color: Color) => void;
/** Color change end handler */
onChangeEnd?: (color: Color) => void;
/** Format change handler */
onFormatChange?: (format: ColorFormat) => void;
}Parse color strings into Color objects supporting multiple formats.
/**
* Parse color string into Color object
* @param value - Color string in various formats (hex, rgb, hsl, etc.)
* @returns Color object for manipulation
*/
function parseColor(value: string): Color;Get available color channels for a specific color space.
/**
* Get available color channels for a color space
* @param colorSpace - Color space to query
* @returns Array of available channel names
*/
function getColorChannels(colorSpace: ColorSpace): ColorChannel[];function ThemeColorPicker() {
const [primaryColor, setPrimaryColor] = useState(parseColor('#0066CC'));
return (
<ColorPicker
label="Primary Color"
value={primaryColor}
onChange={setPrimaryColor}
description="Choose your theme's primary color"
/>
);
}function PaletteBuilder() {
const [colors, setColors] = useState([
parseColor('#FF0000'),
parseColor('#00FF00'),
parseColor('#0000FF')
]);
const [selectedIndex, setSelectedIndex] = useState(0);
const [editingColor, setEditingColor] = useState(colors[0]);
const updateColor = (newColor) => {
setEditingColor(newColor);
const newColors = [...colors];
newColors[selectedIndex] = newColor;
setColors(newColors);
};
return (
<Flex direction="column" gap="size-300">
<Heading level={3}>Color Palette</Heading>
<ColorSwatchPicker
colors={colors}
value={editingColor}
onChange={(color) => {
const index = colors.findIndex(c => c.toString() === color.toString());
if (index !== -1) {
setSelectedIndex(index);
setEditingColor(color);
}
}}
size="L"
columns={colors.length}
/>
<ColorEditor
value={editingColor}
onChange={updateColor}
includeAlpha={true}
formatOptions={['hex', 'rgb', 'hsl']}
/>
<ButtonGroup>
<Button
onPress={() => setColors([...colors, parseColor('#808080')])}
>
Add Color
</Button>
<Button
variant="negative"
isDisabled={colors.length <= 1}
onPress={() => {
const newColors = colors.filter((_, i) => i !== selectedIndex);
setColors(newColors);
setSelectedIndex(Math.max(0, selectedIndex - 1));
setEditingColor(newColors[Math.max(0, selectedIndex - 1)]);
}}
>
Remove Color
</Button>
</ButtonGroup>
</Flex>
);
}function ColorMixer() {
const [baseColor, setBaseColor] = useState(parseColor('#FF6B6B'));
const [mixMethod, setMixMethod] = useState('complement');
const generateMix = (color, method) => {
switch (method) {
case 'complement':
return color.withChannelValue('hue', (color.getChannelValue('hue') + 180) % 360);
case 'analogous':
return color.withChannelValue('hue', (color.getChannelValue('hue') + 30) % 360);
case 'triadic':
return color.withChannelValue('hue', (color.getChannelValue('hue') + 120) % 360);
default:
return color;
}
};
const mixedColor = generateMix(baseColor, mixMethod);
return (
<Flex direction="column" gap="size-300">
<Heading level={3}>Color Mixer</Heading>
<ColorArea
value={baseColor}
onChange={setBaseColor}
xChannel="saturation"
yChannel="lightness"
/>
<ColorSlider
value={baseColor}
onChange={setBaseColor}
channel="hue"
orientation="horizontal"
/>
<RadioGroup
label="Mix Method"
value={mixMethod}
onChange={setMixMethod}
orientation="horizontal"
>
<Radio value="complement">Complement</Radio>
<Radio value="analogous">Analogous</Radio>
<Radio value="triadic">Triadic</Radio>
</RadioGroup>
<Flex gap="size-200">
<View>
<Text>Base Color</Text>
<ColorSwatch color={baseColor} size="L" />
<ColorField
label="Hex Value"
value={baseColor}
onChange={setBaseColor}
/>
</View>
<View>
<Text>Mixed Color</Text>
<ColorSwatch color={mixedColor} size="L" />
<Text>{mixedColor.toString('hex')}</Text>
</View>
</Flex>
</Flex>
);
}/** Color object for manipulation and conversion */
interface Color {
/** Get color channel value */
getChannelValue(channel: ColorChannel): number;
/** Set color channel value */
withChannelValue(channel: ColorChannel, value: number): Color;
/** Convert to string format */
toString(format?: ColorFormat): string;
/** Convert to different color space */
toFormat(colorSpace: ColorSpace): Color;
/** Get color channels for current space */
getColorChannels(): ColorChannel[];
/** Clone color */
clone(): Color;
}
/** Color format options */
type ColorFormat =
| "hex" | "hexa"
| "rgb" | "rgba"
| "hsl" | "hsla"
| "hsb" | "hsba"
| "hsi" | "hsia";
/** Color space definitions */
type ColorSpace =
| "rgb" | "hsl" | "hsb" | "hsi";
/** Color channel names */
type ColorChannel =
| "red" | "green" | "blue" | "alpha"
| "hue" | "saturation" | "lightness"
| "brightness" | "intensity";/** Swatch size options */
type SwatchSize = "XS" | "S" | "M" | "L";
/** Swatch border radius options */
type SwatchRounding = "none" | "default" | "full";