ColorPicker

An RGB color editor with hex input, channel sliders and reusable presets.

Preview

Accent color

Hex

Red

Green

Blue

Size

HideLabel

Read only

Disabled

Presets

Use ColorPicker

ColorPicker is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood

PackageProject UI

"use client";

import { FloodRoot, ColorPicker } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ColorPicker label="Accent color" defaultValue="#ff47a8" name="accent" presets={["#ff47a8", "#ffffff", "#78b8ff"]} />
    </FloodRoot>
  );
}

Design notes

Uses #rrggbb values without alpha or gradients.
The hex field owns native form validation; RGB controls provide an additional editing path.

API reference

Prop	Values	Default
`label`	string	Required
`hideLabel`	boolean	—
`value`	string	—
`defaultValue`	string	—
`onValueChange`	(value: string) => void	—
`name`	string	—
`form`	string	—
`required`	boolean	—
`disabled`	boolean	—
`readOnly`	boolean	—
`controlSize`	"sm" \| "md" \| "lg"	—
`presets`	readonly string[]	—
`invalidMessage`	string	—
`hexLabel`	string	—
`channelLabels`	readonly [string, string, string]	—
`presetsLabel`	string	—
`Native HTML props`	Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" \| "onChange" \| "children">	Forwarded

View TypeScript source

Page Markdown Agent skill