Cromia Color Picker

Forms 42

About

A polished color picker built from Cromia headless primitives, with area selection, hue and alpha sliders, editable channels, and preset swatches.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cromia Color Picker to your project and fits it to your theme.

Code

How Cromia Color Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CromiaColorPicker from "@/components/ui/cromia-color-picker"

const settings = {
  hue: 217,
  saturation: 76,
  brightness: 96,
  alpha: 100,
}

export default function CromiaColorPickerDemo(
  props: Partial<typeof settings>,
) {
  const values = { ...settings, ...props }

  return (
    <div className="flex min-h-[560px] w-full items-center justify-center p-8">
      <CromiaColorPicker
        hue={values.hue}
        saturation={values.saturation}
        brightness={values.brightness}
        alpha={values.alpha}
      />
    </div>
  )
}