Supporting 0 to 1 range colors

This issue has been tracked since 2022-04-10.

When passing colors to shaders, traditionally color channel values are typically given in the range 0 to 1 rather than 0 to 255

Is it possible to hint to tweakpane we want 0 to 1 color values rather than 0 to 255?

cocopon wrote this answer on 2022-05-19

Can you share an example code about this? The core feature of Tweakpane is binding and I'd like to know what kind of parameters you want to bind.

Like this...:

const shader = {
  color: 'rgba(1, 0, 0, 1)',

const pane = new Pane();
pane.addInput(shader, 'color');
haxiomic wrote this answer on 2022-05-20

For example, with three.js you might want to do

// material.color is a THREE.Color object, which is a simple object with 3 properties, r, g, b defined between 0 and 1
pane.addInput(material, 'color');

A solution might look like

pane.addInput(material, 'color', { channelType: 'float' });

Where the default 0 to 255 would have colorType byte, which is where the 255 / 0xFF comes from – generally as display technologies improve we're slowly moving beyond 32 bit colors

cocopon wrote this answer on 2022-06-12

Thank you for the details. Added float color support in #411:

const params = {foobar: {r: 0, g: 0, b: 0}};

// [0-255]
pane.addInput(params, 'foobar');

// [0-255]
pane.addInput(params, 'foobar', {
  color: {type: 'int'},

// [0-1]
pane.addInput(params, 'foobar', {
  color: {type: 'float'},

Please wait for the next release.

cocopon wrote this answer on 2022-06-13

Released the latest version 3.1.0.

More Details About Repo
Owner Name cocopon
Repo Name tweakpane
Full Name cocopon/tweakpane
Language TypeScript
Created Date 2016-05-10
Updated Date 2023-03-17
Star Count 2603
Watcher Count 19
Fork Count 71
Issue Count 11


Issue Title Created Date Updated Date