Penpot’s current color system implementation seems optimized for typical color scales (e.g., Color[100-900]) rather than semantic color systems. This creates challenges when working with semantic color naming conventions (e.g., background, foreground). For reference on semantic color systems: Color - Reshaped
Here are the main issues I’ve encountered:
-
Limited Color Group Visibility: Color groups are only visible in the sidebar assets menu, but not in the bottom color panel or the color picker. This inconsistency across different color selection interfaces creates significant usability issues. The lack of consistent group representation across interfaces hinders efficient color selection and management. Implementing consistent color group representation across all color selection interfaces would greatly improve the user experience and make it easier to work with semantic color systems.
-
Bottom Panel Limitations and Semantic Color Challenges: The bottom panel’s current implementation poses several challenges for users working with semantic color systems:
- Colors are sorted alphabetically in the bottom panel, which works well for simple color scales but becomes problematic with semantic naming conventions.
- The panel only displays the color name, omitting the group name. For example, it shows “critical” instead of “background/critical”. This results in multiple instances of “critical” appearing in the bottom panel, making it difficult to distinguish between similarly named colors from different groups.
- Semantic color systems often use longer, less consistent names, which further complicates navigation and selection in the alphabetically sorted list.
- To work around these limitations, I’ve resorted to adding short prefixes to my colors. While this improves usability to some extent, it’s not an ideal solution and adds unnecessary complexity to color naming.
- Color Picker Limitations for Semantic Color Systems: The current implementation of the color picker presents several challenges when working with semantic color systems:
- Colors are sorted by hue in the color picker. While this approach works well for traditional color scales, it becomes problematic when dealing with semantic color naming. In a semantic system, colors with similar functions (e.g., different shades of “background” or “accent” colors) may have vastly different hues, making them difficult to locate when sorted this way.
- The picker lacks a search feature. This omission is particularly problematic when working with semantic color systems, which often use longer, more descriptive names. Without a search function, users must rely on visual scanning to find specific colors, which can be time-consuming and error-prone, especially in larger color sets.
- There’s no categorization or grouping functionality in the color picker. For semantic color systems, where colors are often logically grouped (e.g., background colors, text colors, accent colors), this lack of organization makes it challenging to quickly identify and select the right color. Users are forced to remember the exact appearance of each color or resort to trial and error, significantly slowing down the design process.
Thanks for the great work!
