Components / Input controls

Color Input

Component + manager

Provides a UI to select or edit an oklch-based color with optional opacity, chroma, and hue controls.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentColorInput

Managercreate_color_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { ColorInput, create_color_input_manager } from "sveltekit-ui"

  const manager = create_color_input_manager({
    label: "Accent color",
    val: { l: 12, c: 14, h: 16, o: 24, is_dark_theme_invert: true },
    is_show_opacity: true,
  })
</script>

<ColorInput {manager} />
<pre>{JSON.stringify(manager.val, null, 2)}</pre>

API reference

Configure the manager, call its methods, and read its reactive state.

9 entries in configuration

Property	Type	Default	Description
`val`	`object`	`null`	initial color data with shape { l, c, h, o, is_dark_theme_invert } or null
`label`	`string`	`null`	optional label displayed above the color input
`is_show_opacity`	`boolean`	`true`	whether to show opacity picker controls
`l_options`	`array`	`[0..24]`	the range of valid 'l' (lightness) indices
`c_options`	`array`	`[0..24]`	the range of valid 'c' (chroma) indices
`h_options`	`array`	`[0..24]`	the range of valid 'h' (hue) indices
`o_options`	`array`	`[0..24]`	the range of valid 'o' (opacity) indices
`on_change`	`function`	`null`	callback invoked whenever color values are updated
`on_finish`	`function`	`null`	callback invoked when the user finishes color selection