Color Picker

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Color Picker is styled but inert: its behavior comes from color-picker. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class color-picker, with 18 modifiers:

• .color-picker
• .color-picker-hex
• .color-picker-hex-input
• .color-picker-hex-label
• .color-picker-popover
• .color-picker-preview
• .color-picker-slider
• .color-picker-slider-label
• .color-picker-slider-value
• .color-picker-sliders
• .color-picker-swatch
• .color-picker-swatch-trigger
• .color-picker-swatch-trigger-chip
• .color-picker-swatch-trigger-label
• .color-picker-thumb
• .color-picker-track
• .color-picker-value-hex
• .color-picker-value-oklch
• .color-picker-values

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { ColorPicker } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { useState } from "react";
import { ColorPicker, Button } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function ColorPickerDemo() {
    const [brand, setBrand] = useState("oklch(0.62 0.19 29)");
    const [accent, setAccent] = useState("#22c55e");

    return (
        <>
            <Section title="Real use · brand color picker">
                <div className="flex flex-col items-start gap-3">
                    <ColorPicker value={brand} onValueChange={(v) => setBrand(v)} />
                    <Button style={{ backgroundColor: brand, borderColor: brand, color: "#fff" }}>
                        Preview button
                    </Button>
                </div>
            </Section>

            <Section title="variant=&quot;swatch&quot; · compact chip, opens the same panel in a popover">
                <Row>
                    <ColorPicker
                        variant="swatch"
                        value={accent}
                        format="hex"
                        onValueChange={(v) => setAccent(v)}
                    />
                    <span
                        className="text-sm"
                        style={{ color: "var(--color-base-content)" }}
                    >
                        {accent}
                    </span>
                    <ColorPicker variant="swatch" disabled defaultValue="oklch(0.55 0.2 280)" />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

ColorPicker — the real OKLCH editor, not <input type="color">. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("ColorPicker", "color-picker", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "color-picker color-picker-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

color-picker

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.