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 using the OKLCH color space, designed for modern interfaces with perceptually uniform colors.

Neutrals

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

VariableOKLCH Value
--neutral-01oklch(1 0 0)
--neutral-02oklch(0.98 0 0)
--neutral-03oklch(0.96 0 0)
--neutral-04oklch(0.92 0 0)
--neutral-05oklch(0.85 0 0)
--neutral-06oklch(0.65 0 0)
--neutral-07oklch(0.5 0 0)
--neutral-08oklch(0.4 0 0)
--neutral-09oklch(0.3 0 0)
--neutral-10oklch(0.2 0 0)
--neutral-11oklch(0.1 0 0)
--neutral-12oklch(0.05 0 0)

Secondary colours

Communicate semantic meaning and add visual interest.

VariableOKLCH Value
--redoklch(0.63 0.19 23)
--orangeoklch(0.69 0.19 45)
--amberoklch(0.85 0.16 84)
--yellowoklch(0.92 0.18 101)
--limeoklch(0.89 0.17 126)
--greenoklch(0.64 0.13 158)
--tealoklch(0.65 0.11 182)
--cyanoklch(0.66 0.12 222)
--blueoklch(0.65 0.19 252)
--indigooklch(0.54 0.19 267)
--purpleoklch(0.56 0.18 306)
--pinkoklch(0.62 0.21 346)

Common semantic pairings:

  • Error: Red;
  • Warning: Yellow;
  • Success: Green;
  • Information: Blue;
  • Custom states: Purple.

Color space

Luxa uses the OKLCH color space, which provides:

  1. Perceptual uniformity: equal changes in values correspond to equal visual changes;
  2. Better browser support: widely supported across modern browsers;
  3. Easier manipulation: adjust lightness, chroma, and hue independently;
  4. Geometric scale: neutrals follow a geometric progression for consistent visual steps.
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. 🎈