Quickstart Guide
Design. Customize. Export Stunning Gradients.
Keyboard Shortcuts
Skip the mouse. ChromaFlow’s native keybindings let you iterate palettes at the speed of thought.
Cmd/Ctrl + Arrows
Cycle through your recent gradient history without opening the sidebar. Press Shift to jump exactly 15 stops.
Option/Alt + Click
Lock a color stop while dragging adjacent handles. Maintains exact hue ratios when adjusting gradient angles.
Cmd/Ctrl + E
Instantly trigger the primary export modal. Select format with 1-4 keys, then Enter to copy to clipboard.
Bulk Export
Ship production-ready assets across your entire workspace in a single command.
Select multiple gradients using Shift-click or drag-select on the canvas grid. Click the Export All button in the top-right toolbar to generate a compressed .zip containing CSS variables, SCSS maps, and Tailwind config files. Each file is automatically named using your project prefix (e.g., `chromaflow-ui-v2.css`) and includes pre-calculated contrast ratios for WCAG 2.1 compliance.
Import from Photoshop
Migrate legacy swatches and layer styles without losing precision.
ChromaFlow reads native .ase and .aco files directly. Drag your Photoshop color library into the import zone, and the parser will automatically map gradient stops, preserve alpha channels, and convert LAB values to sRGB for web readiness. If your file contains named groups like “Dark Mode” or “Brand Primary,” they will appear as organized collections in your dashboard.
For seamless handoffs, enable “Sync Hex & HSL” in Settings > Import to ensure your developers receive dual-format code blocks. Troubleshooting common parsing errors? Check the console log for missing ICC profiles or unsupported extended gamuts.