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

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

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

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

value bindablerequired
Description	The value to control. 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.
Type	ColorValue

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'

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'

---

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