1. Start with a color, image, template, or CPS reference
Choose a base color visually or enter HEX, RGB, HSL, CMYK, or OKLCH values. You can also extract dominant colors from an image, open one of 450 curated templates, or search the independent Color Pick Spot Color System.
Images are processed locally in the browser. CPS references are first-party digital references and are not third-party spot-ink equivalents.
2. Build and refine the palette
Generate harmony-based colors, tints, shades, or new variations. Lock colors that must remain unchanged, reorder swatches, adjust individual values, or create a multi-stop gradient.
Undo and redo help you compare changes without losing the previous palette.
3. Map colors to semantic roles
Assign colors to page backgrounds, surfaces, primary and secondary text, buttons, borders, focus indicators, success, warning, and error roles. Auto Map Roles creates a starting arrangement, while manual controls let you override every assignment.
Role mapping matters because a palette can look attractive as swatches but fail when colors are used for text, actions, and status communication.
4. Test the complete system
Palette Readiness Score combines multiple checks for accessibility, color-vision distinction, UI compatibility, semantic coverage, print planning, and palette balance. The Compatibility Matrix tests foreground and background combinations across the full palette.
Use the dedicated Contrast Checker for detailed text and UI pair analysis, and the Color Vision Simulator to preview common forms of color-vision deficiency.
5. Review recommendations and apply fixes
Fix My Palette proposes changes designed to improve the internal Readiness Score while preserving the palette’s general character. Review the before-and-after values and decide whether the recommendations fit your brand and context.
For critical brand colors, lock the colors you cannot change and adjust the surrounding surfaces, text, or supporting colors instead.
6. Preview digital and print contexts
Use the semantic UI preview to inspect default, hover, active, focus, and disabled states. Screen-to-Print Lab shows CMYK approximations, grayscale behavior, paper simulations, total-ink estimates, and print-risk guidance.
Print previews are planning tools. Always verify important work through calibrated proofing and the selected print provider.
7. Save, compare, and share
Save projects in local folders using IndexedDB. Compare two palettes, merge useful parts, export backups, create share links, or generate a QR code for another device.
Local storage is not cloud backup. Export important project files before clearing browser data or moving to another device.
8. Export for design and development
Download PNG and SVG palette boards, JSON data, CSS variables, Tailwind scales, design tokens, printable sheets, and complete design-system packs. Review generated names and code before using them in production.