SketchWave Color Demo

SWColor is a SketchWaveJS class that provides a robust color management system using the HSBA color mode (Hue, Saturation, Brightness, Alpha). It offers intuitive color creation and manipulation with the ability to convert between HSBA, RGB, HSL, and hexadecimal color formats.

About This Demo

This interactive visualization displays a complete HSBA color wheel, demonstrating the full spectrum of hues at various saturation and brightness levels. The demo showcases how the SWColor class creates visually stunning color gradients and provides an intuitive understanding of the HSB color space used throughout the SketchWaveJS framework.

How to Use This App

• Color Wheel: The display shows a complete 360° color wheel with hue ranging from 0° (red) through the full spectrum and back to red.
• Saturation & Brightness: Click on a color disk to open an options panel. Use the saturation, brightness and alpha sliders to adjust the disk's color. Click the Disk number to reset the original color. Click the 'X' to close the options panel.
• Reset the Wheel: Use the Reset Wheel button to restore the color wheel to its original state.

Understanding HSBA

• Hue (H): The color 'family', measured in degrees (0-360°). Red=0°, Green=120°, Blue=240°
• Saturation (S): The color intensity or purity (0-100%). 0% is gray, 100% is full color
• Brightness (B): The lightness of the color (0-100%). 0% is black, 100% is full brightness
• Alpha (A): The transparency (0-100%). 0% is fully transparent, 100% is fully opaque

Learn More

For complete documentation including all methods, properties, color conversion functions, and advanced features of the SWColor class, see the Full SWColor Reference Guide.

See our set of Predefined Colors.