Colours

Explore Luxa CSS's carefully curated, essential-only colour palette for modern interfaces.

On this page

Luxa CSS offers a carefully curated color palette optimized for both sRGB and P3 color spaces, designed for modern interfaces.

Neutrals

Provide utility and hierarchy without competing with core and secondary colors.

Secondary colours

Communicate semantic meaning and add visual interest.

Common semantic pairings:

  • Error: red;
  • Warning: yellow;
  • Success: green;
  • Information: blue;
  • Custom states: purple.

Color spaces

Luxa optimizes for two color spaces:

  1. sRGB: standard color space for most devices;
  2. P3: broader gamut for more vibrant hues on supported devices.
Accessibility considerations
  • Choose colors with sufficient contrast ratios for readability;
  • Use tools like the WebAIM Contrast Checker to verify WCAG compliance;
  • Ensure your color choices are inclusive for users with visual impairments.

Remember: While Luxa provides color scales, it’s your responsibility to use them in an accessible manner.