Photonix

ColorPicker

A premium color picker component supporting HEX, RGB, and HSV controls with native EyeDropper support.

Preview

HEX
%
Usage
"use client";

import { useState } from 'react';
import { Flex, ColorPicker } from '@photonix/ultimate';

export default function ColorPickerBasicExample() {
    const [color, setColor] = useState('#F54545');

    return (
        <Flex gap="xl" align="center" justify="center" direction="column" p="xl">
            <ColorPicker value={color} onChange={(val) => setColor(val)} />
        </Flex>
    );
}

Component API

ColorPicker

Prop
Type
Default
Description
value
string
-
Current color as a string (hex, rgb/rgba, or hsl/hsla).
defaultValue
string
"#F54545"
Initial color for uncontrolled usage.
onChange
((value: string, color: ColorPickerColor) => void)
-
Callback fired when the selected color changes.
showEyeDropper
boolean
true
Whether to show the native EyeDropper action when supported.
disabled
boolean
false
Disables all picker controls.

Variants

Disabled State

The color picker can be completely disabled to prevent any user interactions.

HEX
%
Disabled State
"use client";

import { ColorPicker } from '@photonix/ultimate';

export default function ColorPickerDisabledExample() {
    return (
        <ColorPicker disabled defaultValue="#3F51B5" />
    );
}

On this page

Preview
Component API
Variants
Disabled State
Photonix UI - React Components, Templates & Figma Design System