Skip to content
Svelte Tweakpane UI
Control Components

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.

TypeColorValue

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.

Typeboolean
Defaultfalse

label

🔗
optional
Description

Text displayed next to control.

Typestring
Defaultundefined

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
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.

Typeboolean
Defaulttrue

expanded

🔗
bindableoptional
Description

Expand or collapse the input's picker.

Typeboolean
Defaultfalse

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).

ExtendsValueChangeEvent
TypeColorChangeEvent