Style-Forge.Colors

Style-Forge.Colors is an atomic CSS palette generator based on the HSL color model. Generate exactly the colors you need — programmatically, interactively, or by name. Perfect for design systems, theming, and scalable UIs.

🚀 Quick Start

npx sf.color

or use the full name:

npx style-forge.colors

✨ What you can do

• 🎨 Generate atomic HSL-based CSS color files
• ⚙️ Run fully in terminal — no JavaScript or framework required
• 🔁 Combine selected .css files into a palette
• 📦 Use in Tailwind, Vue, React, Svelte, or raw CSS

🎨 Supported Input Formats

| Format | Example Input | Example Output | |--------|---------------|-----------------------| | HSL | 259 100 42 | hsl(259, 100%, 42%) | | RGB | 120 200 255 | rgb(120, 200, 255) | | HEX | #FF00AA | #ff00aa |

You can use any of the above formats when generating a color CSS file.
The output includes a fully scoped, theme-aware CSS module for light, dark, and auto modes.

🎯 Modifier Suffixes

Style-Forge Colors provides utility modifiers to fine-tune element behavior:

| Suffix | Meaning | Applies to | |-----------|-------------------------------------------|-------------| | :var | Declares the HSL color as a CSS variable. | universal | | :st | Static. Ignores theme-based changes. | bg, txt | | :txt | Text color based on contrast logic. | txt | | :txt:st | Static text color. | txt | | :txt:rv | Reversed text (for strong contrast). | txt | | :bd | Border color synced with base color. | bd | | :bd:st | Static border color (not theme-aware). | bd | | :bd:rv | Reversed border color for contrast. | bd |

Combine them like .sf-c-180:100:50:txt:st for consistent control across themes.

Documentation

To check out docs, visit style-forge.github.io

Support the project ⭐

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏

Modules

Contributing

We welcome contributions from the community! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/branch-name.
3. Make your changes and commit them: git commit -am 'Add some feature'.
4. Push your changes to the forked repository: git push origin feature/branch-name.
5. Create a pull request in the original repository.

For more detailed information, please refer to CONTRIBUTING.md.

License

This project is licensed under the MIT License. See the LICENSE file for details.