Colours
Explore Luxa CSS's carefully curated, essential-only colour palette for modern interfaces.
Luxa offers a meticulously curated colour palette optimized for both sRGB and P3 colour spaces. This palette includes Neutrals for utility and hierarchy and Secondary Colours for semantic meaning and visual interest.
Neutrals
Neutrals provide utility and hierarchy without competing with our core and secondary colours. These shades are essential for maintaining balance and focus in your design.
Secondary Colours
Our secondary colours are designed to communicate semantic meaning and add visual interest to your projects.
These colours are perfect for accents, highlights, and other design elements that require a pop of colour.
Some common pairings that work well in Western culture:
- Error: red;
- Warning: yellow;
- Success: green;
- Information: blue;
- Custom states: purple.
What is the P3 Colour Space?
The P3 colour space offers a broader gamut of colours than sRGB, resulting in more affluent and vibrant hues. This allows for better display accuracy on supported devices, ensuring your designs look their best across screens.
Accessibility
Ensuring your colour palette is accessible is crucial for creating inclusive designs. Luxa CSS provides scales, and it is up to you to choose and use those with sufficient contrast ratios relative to your background to make text readable for users with visual impairments.
Use tools like the WebAIM Contrast Checker to verify that your colour choices meet the WCAG guidelines.