Color palettes
Creating a consistent and adaptable color palette is a core feature of the Croma Design System. Our system generates dynamic palettes from main colors, leveraging foreground and background tones to ensure harmony and adaptability across light and dark themes.
How it Works
For each main accent color, we create a full palette of shades ranging from light to dark. This is done by blending the accent color with background and foreground tones at varying percentages. The result is a comprehensive set of shades that provide flexibility for designing UI elements, ensuring readability and visual balance.
Palette Structure
The neutral palette also includes the tones 000 and 1000, which represent the foreground and background, respectively. Since the entire structure of the design system is built upon these values, they are not included in individual color palettes. This is because they remain consistent across all themes, representing 0% color at both extremes, ensuring a universal and cohesive foundation.
Each palette consists of nine shades:
- 100–400: Lighter shades, created by blending the accent color with the background tone (000).
- 500: The base accent color, unaltered.
- 600–900: Darker shades, created by blending the accent color with the foreground tone (1000).
Benefits
- Consistency: Ensures color harmony across themes and components.
- Scalability: Automatically generates palettes for any number of accent colors.
- Adaptability: Supports light and dark themes by dynamically aligning with foreground and background tones.
This approach not only streamlines the creation of color palettes but also ensures that your designs remain consistent and accessible across different contexts and themes.
Palettes
Neutral
A carefully crafted set of neutral tones, optimized for readability and balance, forming the foundation of our UI. This is unique in that it has two absolute edges: 000, corresponding to 100% background, and 1000, corresponding to 100% foreground. Other palettes do not include such extremes because they involve mixtures of color, whereas these neutral tones remain completely devoid of any hue.
The neutral palette does not adhere to the standard percentages used for creating shades. Instead, it applies custom percentages to ensure more accurate representation of grayscale tones, achieving better consistency and visual balance.
Accent
Vibrant, brand-aligned hues used to highlight key elements and add personality to the interface.
Feedback
Specific shades representing statuses ensuring clear communication of system feedback.
Alternatives
A versatile palette designed for dynamic use, such as assigning random colors to tags, avatars, or other elements requiring visual differentiation.