PaletteRx">Tailwind CSS has its blue-50 through blue-900. Material Design has its numbered scales. Automatic.css generates shades from your base colors automatically. Behind all of these is the same concept: starting from one base color and generating a full range of lighter and darker variants.
The HSL Method
The simplest approach uses HSL. Keep the hue and saturation constant, and vary only the lightness. For a base color at L=50%, your scale might be: 50 (L=97%), 100 (L=93%), 200 (L=86%), 300 (L=75%), 400 (L=62%), 500 (L=50%, your base), 600 (L=42%), 700 (L=35%), 800 (L=25%), 900 (L=15%). The steps are not even because human perception of lightness is non-linear.
The OKLCH Method
OKLCH produces perceptually uniform shade scales. Because OKLCH's lightness channel maps linearly to perceived brightness, equal numeric steps produce visually equal brightness steps. This eliminates the "yellow problem" in HSL where yellows look much brighter than blues at the same L value.
The color-mix() Method
CSS color-mix() provides a runtime approach. Mix your base with white for lighter shades and with black for darker shades at specified percentages. This requires no build step and can be combined with CSS custom properties for fully dynamic shade generation.
How PaletteRx Fits
PaletteRx exports your base colors, which are the 500-level anchors of your shade scales. The ACSS export includes HSL decomposition specifically so ACSS can generate its own shade system from your bases. For other platforms, you use one of the methods above to extend the base into a full scale.
color-mix() for runtime shade generation from your PaletteRx exports.