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.
npx sf.coloror use the full name:
npx style-forge.colors- 🎨 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
| 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.
Style-Forge Colors provides utility modifiers to fine-tune element behavior:
| Suffix | Meaning | Applies to |
|---|---|---|
: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 |
Combine them like
.sf-c-180:100:50:txt:stfor consistent control across themes.
To check out docs, visit style-forge.github.io
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. 🙏
| Module | Links | Version | Description | |
|---|---|---|---|---|
| hub | GitHub | NPM |  |
Central repository that integrates all project modules. |
| base | GitHub | NPM |  |
Basic styles and foundational components of the project. |
| form | GitHub | NPM |  |
Styles and components for creating forms. |
| helpers | GitHub | NPM |  |
Utility functions and helpers for the project. |
| └ media | GitHub | NPM |  |
Comprehensive CSS media query helpers for responsive web design. |
| themes | GitHub | NPM |  |
Themes and styling options for the project. |
| patterns | GitHub | NPM |  |
Reusable patterns and templates for the project. |
| colors | GitHub | NPM | |
Atomic HSL-based color generator and palette engine. |
We welcome contributions from the community! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature/branch-name. - Make your changes and commit them:
git commit -am 'Add some feature'. - Push your changes to the forked repository:
git push origin feature/branch-name. - Create a pull request in the original repository.
For more detailed information, please refer to CONTRIBUTING.md.
This project is licensed under the MIT License. See the LICENSE file for details.