Colours
Explore Luxa CSS's carefully curated, essential-only colour palette for modern interfaces.
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.
| Variable | Value (sRGB) | Value (Display P3) |
|---|---|---|
--neutral-01 | #ffffff | color(display-p3 1 1 1) |
--neutral-02 | #f8fafc | color(display-p3 0.973 0.98 0.988) |
--neutral-03 | #f1f5f9 | color(display-p3 0.945 0.961 0.976) |
--neutral-04 | #e2e8f0 | color(display-p3 0.886 0.91 0.941) |
--neutral-05 | #cbd5e1 | color(display-p3 0.796 0.835 0.882) |
--neutral-06 | #94a3b8 | color(display-p3 0.58 0.639 0.722) |
--neutral-07 | #64748b | color(display-p3 0.392 0.455 0.545) |
--neutral-08 | #475569 | color(display-p3 0.278 0.333 0.412) |
--neutral-09 | #334155 | color(display-p3 0.2 0.255 0.333) |
--neutral-10 | #1e293b | color(display-p3 0.118 0.161 0.231) |
--neutral-11 | #0f172a | color(display-p3 0.059 0.09 0.165) |
--neutral-12 | #020617 | color(display-p3 0.008 0.024 0.09) |
Secondary colours
Communicate semantic meaning and add visual interest.
| Variable | Value (sRGB) | Value (Display P3) |
|---|---|---|
--red | #e5484d | color(display-p3 0.83 0.329 0.324) |
--orange | #f76b15 | color(display-p3 0.9 0.45 0.2) |
--amber | #ffc53d | color(display-p3 1 0.77 0.26) |
--yellow | #ffe629 | color(display-p3 1 0.92 0.22) |
--lime | #bdee63 | color(display-p3 0.78 0.928 0.466) |
--green | #30a46c | color(display-p3 0.332 0.634 0.442) |
--teal | #12a594 | color(display-p3 0.297 0.637 0.581) |
--cyan | #00a2c7 | color(display-p3 0.282 0.627 0.765) |
--blue | #0090ff | color(display-p3 0.247 0.556 0.969) |
--indigo | #3e63dd | color(display-p3 0.276 0.384 0.837) |
--purple | #8e4ec6 | color(display-p3 0.523 0.318 0.751) |
--pink | #d6409f | color(display-p3 0.775 0.297 0.61) |
Common semantic pairings:
- Error: Red;
- Warning: Yellow;
- Success: Green;
- Information: Blue;
- Custom states: Purple.
Color spaces
Luxa optimizes for two color spaces:
sRGB: standard color space for most devices;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.
Getting Help
Need help? Open an issue. I'll be happy to help. 🎈