new
improved
Sketch
Figma
Penpot
UI Color Palette 5.0.0
Evolving Toward a Palette Ecosystem
Key Features
🎨 New plugins for the design ecosystem
- Sketch Plugin: UI Color Palette is now available on Sketch with nearly all core functionalities (swatches cannot be fully synced) → Try it out
- Penpot Plugin: UI Color Palette is now available on Penpot with nearly all core functionalities (tokens cannot be synced for now) → Try it out
📐 Advanced transparency management
- Scaling with transparency: Ability to scale a color while accounting for transparency for more precise gradients
🎯 Contrast customization
- Configurable contrast ratio: Set your desired contrast score to optimize accessibility in your color palettes
Improvements
🔄 Enhanced architecture
- Page-level palette creation: Create palettes directly at the page level instead of in nodes
- Simulation-theme linking: Color simulation and text colors linked to the current color mode
🎨 Enhanced management
- Reset lightness and chroma scale: Reset the scale of lightness and chroma for better control
- Palette management: Duplicate and delete palettes
- Easier preset switching: Improved interface for switching between color presets
📤 Export enhancements
- New code visualizer: New generated code visualizer
- Tailwind 4: Support for new Tailwind CSS v4 format
- DTCG Tokens: Export to Design Token Community Group format
- SCSS and Less variables: Export to CSS preprocessor variable formats
- OKLCH model: Added OKLCH color model in CSS exports
Minor Changes
🔧 Interface improvements
- Palette layout positioning: Moved palette layouts next to the palette name for better organization
- User preferences relocation: User preferences moved to the user menu level
- Acceleration settings: Separated speeds related to accelerations for more precise control
- Hue and chroma shifting: Swapped hue shifting and chroma shifting positions
- Color mode terminology: "Color theme" is now called "color mode" for consistency
- One-click code copy: Code can now be copied all at once with a single button
🔤 Generated document
- Martian Mono font: Changed default font to Martian Mono for better code readability
- Lexend font: Use for Lexend for secondary texts such as the description of the modes, colors, and palette
---
Support & Community
Need help or have questions? We're here to support you:
- 🎧 Support: Get help with any questions or issues → Contact Support
- 💬 Discord Community: Join our community for discussions and connect with other users → Join Discord