Tweakpane Colors Plugin

A Tweakpane plugin for generating color palettes using David Merfield's randomColor.

Installation & Usage

‼️ Note: Coming soon. Right now you will need to manually build to generate the min file.

Package Manager

npm install tweakpane-plugin-colors

import {Pane} from 'tweakpane';
import * as ColorsPlugin from 'tweakpane-plugin-colors';

const pane = new Pane();

// Register the plugin
pane.registerPlugin(ColorsPlugin);

// Add the colors blade
const colorsBlade = pane.addBlade({
	view: 'colors',
});

// Access generated colors programmatically
console.log(colorsBlade.colors); // Array of rgba color strings

// Listen for color changes
colorsBlade.value.emitter.on('change', (ev) => {
	console.log('RGBA colors:', ev.rawValue.colors);
	console.log('Hex colors:', ev.rawValue.colorsHex);
});

Script

<script src="tweakpane.min.js"></script>

import * as ColorsPlugin from 'your-path/tweakpane-plugin-colors.min.js';

const pane = new Tweakpane.Pane();
pane.registerPlugin(ColorsPlugin);

const colorsBlade = pane.addBlade({
  view: 'colors',
});

Features

The plugin provides an interactive interface for generating color palettes with the following controls:

Mode

A dropdown list for selecting the color mode:

• Random - Generates random colors across the spectrum
• Monochrome - Generates shades of gray
• Red - Generates shades of red
• Orange - Generates shades of orange
• Yellow - Generates shades of yellow
• Green - Generates shades of green
• Blue - Generates shades of blue
• Purple - Generates shades of purple
• Pink - Generates shades of pink

When "Random" is selected, a random hex color is chosen for the color picker.

Number of Colors

You can specify the number of colors in three ways:

Default (Editable) - If no count is provided, a range slider (1-10) is shown, defaulting to 5:

const colorsBlade = pane.addBlade({
	view: 'colors',
	// Defaults to a slider from 1-10, starting at 5
});

Fixed Number - Provide a specific number to lock the count (shown as non-editable label):

const colorsBlade = pane.addBlade({
	view: 'colors',
	count: 5, // Always generates exactly 5 colors (not editable in UI)
});

Random Range - Specify min and max values for a slider range that randomizes on each regeneration:

const colorsBlade = pane.addBlade({
	view: 'colors',
	count: {min: 3, max: 10}, // Shows a slider from 3-10, randomizes on each refresh
});

When using a range, the slider bounds are set to your min/max values, and each time colors are regenerated (via mode, luminosity, alpha, or hue changes), a new random count within the specified range is selected. The slider updates to reflect the current count.

Luminosity

A dropdown list for selecting the brightness of generated colors:

• Bright - Generates bright colors
• Light - Generates light colors
• Dark - Generates dark colors

Alpha

A range slider (0.5-1.0) that controls the transparency of generated colors.

Color

A color picker that allows manual selection of a custom hue. This overrides the mode selection and is automatically updated when the mode changes.

Color Grid

A visual display showing all generated colors as clickable squares. Hovering over a square scales it up and displays the color value as a tooltip.

API

The blade API provides access to the generated colors:

const colorsBlade = pane.addBlade({
	view: 'colors',
	count: 8, // Optional: omit for editable slider (1-10, starts at 5), number for fixed count, or {min, max} for random range
	mode: 'blue', // Optional: default is 'random'
	luminosity: 'dark', // Optional: default is 'bright'
	alpha: 0.8, // Optional: default is 1.0
});

// Get the current array of generated colors (rgba format)
const colors = colorsBlade.colors; // e.g., ['rgba(255, 100, 50, 1)', 'rgba(200, 150, 100, 1)', ...]

// Get the current array of generated colors (hex format)
const hexColors = colorsBlade.colorsHex; // e.g., ['#ff6432', '#c89664', ...]

// Manually trigger a color regeneration
colorsBlade.refresh();

Programmatic Control Methods

The plugin provides methods to programmatically change settings and update the UI:

// Set mode (updates UI and regenerates colors)
colorsBlade.setMode('blue'); // Options: 'random', 'monochrome', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink'

// Set luminosity (updates UI and regenerates colors)
colorsBlade.setLuminosity('dark'); // Options: 'bright', 'light', 'dark'

// Set color count (updates UI and regenerates colors)
colorsBlade.setCount(5); // Number from 1 to 10 (respects min/max if configured)

// Set hue/base color (updates UI, auto-detects mode, and regenerates colors)
colorsBlade.setHue('#ff5733'); // Any hex color

// Get current configuration
const config = colorsBlade.getConfig();
// Returns: { mode, luminosity, count, actualCount, alpha, hue }

// Configure multiple parameters at once (atomic update)
colorsBlade.configure({
	mode: 'green',
	luminosity: 'light',
	count: 6,
	hue: '#00ff00',
	alpha: 0.9
});
// Only refreshes colors once after all parameters are set
// Parameters are optional - only include what you want to change

Use Cases:

• Audio-reactive visualizations (change colors based on beats/frequency)
• Animation sequences (timed color palette changes)
• User-driven randomization (button to randomize parameters)
• Syncing with external data sources

Technical Details

• Colors are generated in rgba format
• The plugin uses the latest version of Tweakpane (v4.x)
• Built with TypeScript for type safety
• Fully responsive and integrates seamlessly with Tweakpane's theming

Development

# Install dependencies
npm install

# Build the plugin
npm run build

# Start development server
npm start

# Run tests
npm test

License

MIT

Credits

This plugin uses randomColor by David Merfield for color generation.