logo

Aki UI

アキ ウイ

Color picker

カラーピッカー

Color picker modal with Tailwind CSS, lucid icon and Base UI.

     
%
   

Installation

Before start please make sure you follow instructions1

Install the following dependencies:2

npm install @base-ui-components/reactnpm install lucid-reactnpm install color

Copy and paste the following code into a new component file:3

'use client';

import Color from "color"
import { PipetteIcon } from 'lucide-react';
import { Select } from '@base-ui-components/react/select';
import { Slider } from '@base-ui-components/react/slider';

import {
type ComponentProps,
createContext,

How to use it4

"use client"

import {
ColorPicker,
ColorPickerSelection,
ColorPickerHue,
ColorPickerAlpha,
ColorPickerEyeDropper,
ColorPickerOutput,
ColorPickerFormat

Props

ColorPicker

NameDefaultDescription
value—

Parameters<typeof Color>[0]

Controlled color value. Can be any format supported by the Color library (hex, rgb, hsl, etc.).

defaultValue#000000

Parameters<typeof Color>[0]

Default color value when used as uncontrolled component.

onChange—

(value: Parameters<typeof Color.rgb>[0]) => void

Callback fired when the color changes. Returns RGBA array format [r, g, b, a].

className—

string

Additional CSS classes to apply to the root container.

...props—

HTMLAttributes<HTMLDivElement>

All other HTML div attributes are forwarded to the root element.

ColorPickerSelection

NameDefaultDescription
className—

string

Additional CSS classes to apply to the saturation/lightness picker area.

...props—

HTMLAttributes<HTMLDivElement>

All other HTML div attributes are forwarded to the selection area.

ColorPickerHue

NameDefaultDescription
className—

string

Additional CSS classes to apply to the hue slider.

...props—

ComponentProps<typeof Slider.Root>

All Slider.Root props are forwarded to the hue slider component.

ColorPickerAlpha

NameDefaultDescription
className—

string

Additional CSS classes to apply to the alpha slider.

...props—

ComponentProps<typeof Slider.Root>

All Slider.Root props are forwarded to the alpha slider component.

ColorPickerEyeDropper

NameDefaultDescription
className—

string

Additional CSS classes to apply to the eyedropper button.

...props—

ComponentProps<typeof Button>

All Button props are forwarded to the eyedropper button component.

ColorPickerOutput

NameDefaultDescription
className—

string

Additional CSS classes to apply to the format selector dropdown.

...props—

HTMLAttributes<HTMLDivElement>

All other HTML div attributes are forwarded to the output selector.

ColorPickerFormat

NameDefaultDescription
className—

string

Additional CSS classes to apply to the color format display inputs.

...props—

HTMLAttributes<HTMLDivElement>

All other HTML div attributes are forwarded to the format display container.