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

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.

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.