The Color Swatches tool generates a complete CSS custom property palette from a single base color. It follows the ACSS naming convention, producing semantic shade steps and transparency steps ready to paste into your stylesheet.

How to use #

1. Open the etchKit panel and find Color Swatches in the library (it is under the Design category), or search for it by name.
2. Click the card to open the tool inside the panel.
3. Pick a base color using the color picker or type a hex value directly.
4. Set the CSS variable name. This is the prefix used for all generated custom properties (for example, primary would generate --primary-light, --primary-dark, --primary-trans-10, etc.).
5. The palette generates in real time as you adjust the color or name.
6. Copy the output and paste it into your stylesheet or ACSS custom property settings.

What it generates #

From one base color, the tool creates:

• Shade steps ranging from lighter to darker variations of the base color. These follow the semantic naming pattern used by AutomaticCSS (light, medium, dark, ultra-light, ultra-dark, and so on).
• Transparency steps with varying opacity levels (10%, 20%, 30%, etc.), useful for overlays, backgrounds, and hover states.

The exact output format matches what ACSS expects, so you can drop it directly into your ACSS custom properties without reformatting.

State persistence #

The tool saves your last used color and variable name automatically. When you close the panel and reopen the Color Swatches tool later, it picks up where you left off. This data is stored in localStorage under the etchkit_tool_swatches key and is cleared if you use the “Clear saved data” option in Settings.