What is Supa Colors Studio?

Supa Colors Studio is an advanced platform for creating, managing, and organizing professional color systems. It allows you to generate consistent color palettes using scientific algorithms based on OKLCH, the most modern and accurate color model available.

With Supa Colors Studio, you can create complete color systems for your projects using two powerful generation algorithms: the Curve Algorithm for full manual control, or the Pattern Algorithm that uses keyframes to replicate the behavior of popular design systems like Tailwind, Material UI, and more.

Organize palettes into collections, use styles to maintain consistency, create custom patterns, and share your work with the community.

Quick Start

To get started with Supa Colors Studio, follow these simple steps:

• Create a new Color System from the Systems page
• Add a Collection to organize your palettes
• Create a Style with your desired generation settings (choose between Curve or Pattern algorithm)
• Generate your first Palette by selecting a base color
• Customize the palette by modifying shades, adjusting curves, or editing pattern keyframes

You can also start from a System Template when creating a new Color System. Templates like Tailwind, Material UI, and others provide a complete pre-built starting point.

Interface Overview

The Supa Colors Studio editor is designed for efficient color system creation and management. Understanding the interface layout will help you navigate and work more effectively.

Main areas of the editor:

• Sidebar: Left panel showing Collections and Palettes. Expand/collapse collections to organize your work. Click palettes to edit them.
• Main Content Area: Center area displaying palettes in grid or list view. Shows all shades with contrast badges, OKLCH values, and gamut indicators.
• Settings Bar: Central floating bar with display settings (view modes, color format, gamut toggle), accessibility options (contrast algorithms, CVD simulation), and export controls. Visible when no palette is selected.
• Editor Sidebar: Left panel containing Collections, Styles, and Palettes. Includes actions for creating new palettes, batch operations (Batch Create when no selection, Batch Edit when palettes are selected), and palette management.
• Floating Panels: Side panels that slide in for Palette Editor, Style Editor, Pattern Editor, and Batch Editor. Close with Escape or click outside.

Views available in the toolbar:

• List View: Vertical list of palettes with all shades visible. Best for detailed editing and comparison.
• Grid View: Compact grid layout showing palette previews. Best for overview and navigation.
• Contrast View: Accessibility analysis showing contrast matrix between all color combinations. See Contrast Algorithms for details.
• Preview View: Visual preview of palettes in context. Useful for seeing how colors work together.

The editor automatically saves changes as you work. Look for the save indicator in the header to confirm your work is saved.

Keyboard Shortcuts

Supa Colors Studio supports keyboard shortcuts to speed up your workflow. Here are the most useful shortcuts:

• Cmd+K / Ctrl+K: Open global search dialog. Search for palettes, collections, and systems across your workspace.
• Cmd+Z / Ctrl+Z: Undo last action. Works for palette edits, shade overrides, and most operations.
• Cmd+Shift+Z / Ctrl+Shift+Z: Redo last undone action. Restore changes you accidentally undid.
• Escape: Close dialogs, panels, and modals. Also closes the search dialog.
• Cmd+/ / Ctrl+/: Show keyboard shortcuts help (when available).

Shortcuts work throughout the application, including in the editor, dialogs, and panels. Most shortcuts follow standard conventions for your platform.