Color Theory Sandbox
Create, test, and visualize color palettes in real time using interactive color theory tools. Experiment with harmony rules, gradients, contrast, saturation, and accessibility to better understand color relationships in design.
Color Theory Sandbox
Interactive color wheel, harmony rules, and palette querying. Pick a color, explore harmonies, and query color data with JavaScript expressions.
Color Harmonies
Color Query Expression
Query palette array using JSQuery results will appear here. Execute a query on the current palette.
Why Use Color Theory Sandbox?
Color Harmonies
Generate complementary, triadic, analogous schemes instantly from any base color.
Data-Driven Queries
Use JavaScript expressions to filter, map, and analyze colors by luminance, saturation, hue.
WCAG Contrast
Check contrast ratios between base and harmony colors for accessibility.
Export & Copy
Copy palettes as hex codes, JSON, and reuse across design projects.
How Our Color Sandbox Works
The sandbox uses chroma.js for accurate color conversions. Pick any hue from the interactive color wheel, and harmony rules generate a coherent palette. Each color in the palette is exposed as an object with helper methods.
Available Color Methods in Queries:
color.hex()- Returns hex string (e.g., "#ff5733")color.rgb()- Returns [r,g,b] arraycolor.hsl()- Returns [hue, sat, light]color.luminance()- Returns brightness (0-1)color.saturation()- Returns saturation (0-1)color.hue()- Returns hue angle (0-360)
Query Examples:
palette.filter(c => c.luminance() > 0.6)→ Get bright colorspalette.map(c => ({hex:c.hex(), lum:c.luminance()}))→ Transform structurepalette.sort((a,b) => a.saturation() - b.saturation())→ Sort by saturation