Color

A color picker.

Wraps Tweakpane's color input binding.

<Color> is a dynamic component: the alpha prop is only available when value is a number, and the type prop is only available when value is an object or tuple. (Other value types carry their own alpha and type information.)

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

Dynamic Props

This component has dynamic props, which means the available props can change depending on the value or type of other props.

Props contingent on certain conditions are annotated below with a dynamic flag, and include explanations of the “conditions” affecting the prop’s availability. More Info →

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), a number (e.g. 0xff00ff), an object with r, b, g, and optional a keys, or a tuple. The type of this value will determine the availability of the alpha and type props.
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'

alpha optionaldynamic
Description	Whether to treat a number value as carrying an alpha component in its lowest byte (e.g. 0xff00667f).
Type	boolean
Default	false
Conditions	Available when value is of type number, since string, object, and tuple values carry their own alpha information.

type optionaldynamic
Description	Whether to treat object or tuple values as floats from 0.0 to 1.0, or integers from 0 to 255.
Type	'float' | 'int'
Default	'int'
Conditions	Available when value is an object or value is a tuple, since string values carry their own type information and number values are always treated as integers.

---

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