Color

A color picker.

Wraps Tweakpane's color input binding.

Usage outside of a <Pane> component will implicitly wrap the color picker in <Pane position="inline">.

---

Example

Demo

Code

ColorExample.svelte

<script lang="ts">
  import { Color } from 'svelte-tweakpane-ui'

  let startColor = '#fff000'
  let endColor = '#ff00ff'
</script>

<Color bind:value={startColor} label="Start Color" />
<Color bind:value={endColor} label="End Color" />

<div class="demo" style:--a={startColor} style:--b={endColor}></div>

<style>
  .demo {
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(to top, var(--a), var(--b));
  }
</style>

---

Props

value bindablerequired
Description	A color value to control. Use either a color-like string (e.g. #ff00ff), or an object with r, b, g, and optional a keys. The value to control.
Type	ColorValue

type optional
Description	Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
Type	'float' | 'int'
Default	'int'

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

userExpandable optional
Description	Allow users to interactively expand / contract the picker.
Type	boolean
Default	true

expanded bindableoptional
Description	Expand or collapse the input's picker.
Type	boolean
Default	false

picker optional
Description	The style of value "picker" to use in the input.
Type	'inline' | 'popup'
Default	'popup'

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	ColorChangeEvent