Kromatika is a comprehensive color library that provides a wide range of color palettes for use in your web projects. This library includes colors organized by categories, making it easy to maintain a consistent color scheme throughout your application.
To use the Kromatika color library in your project, follow these steps:
- Clone the Repository:
git clone https://github.com/michael-andreuzza/kromatika.git
cd kromatika
- Install Dependencies To get started with Kromatika, you need to install the package and any necessary dependencies. If you are using npm, you can install Kromatika with:
NPM
npm install kromatika
Yarn
yarn add kromatika
You can import the colors into your JavaScript, JSON, SCSS and CSS files as needed.
To use the colors in your JavaScript files, you can import the colors
object from index.js
:
const colors = require('./index.js');
// EXample usage:
console.log(colors.black); // Outputs the hex color code for black
#### JSON
To use the colors in your JSON files, you can import the `colors` object from `colors.json`:
{
"metal": [
"#F3F4F7",
"#E2E4EB",
"#CCD0DC",
"#B3BACB",
"#9BA4BA",
"#828DA9",
"#626E8E",
"#49526A",
"#303646",
"#191C24"
]
// Add more color categories as needed
}
To use the colors in your YAML files, you can import the colors.yml
file:
metal:
- "#F3F4F7"
- "#E2E4EB"
- "#CCD0DC"
- "#B3BACB"
- "#9BA4BA"
- "#828DA9"
- "#626E8E"
- "#49526A"
- "#303646"
- "#191C24"
# Add more color categories as needed
To use the colors in your SCSS files, you can import the colors.scss
file:
@import "kromatika/colors.scss";
// EXample usage:
body {
background-color: var(--kr-charcoal-50);
color: var(--white);
}
To use the colors in your LESS files, you can import the colors.less file:
@import "~kromatika/colors.less";
// Example usage:
body {
background-color: @black-50;
color: @white;
}
To use the colors in your Stylus files, you can import the colors.styl file:
@import "~kromatika/colors.styl"
// Example usage:
body
background-color: $black-50
color: $white
@import "kromatika/colors.css";
// Example usage:
body {
background-color: var(--kr-charcoal-50); /* Using a black shade */
}
The color library includes the following categories:
- Charcoal: A range of shades of charcoal.
- Metal Shades: A range of metallic colors.
- Haiti Shades: Soft, muted colors inspired by the Haitian palette.
- Purple Shades: A variety of purple tones.
- Blue Berry Shades: Fresh and vibrant blue shades.
- Blue Shades: Rich and deep blue colors.
- Sky Shades: Light and airy sky colors.
- Turquoise Shades: Bright and refreshing turquoise tones.
- Persian Green Shades: Elegant green shades.
- Pastel Green Shades: Soft and pastel green colors.
- Grass Shades: Lively green shades.
- Carrot Shades: Warm and inviting orange shades.
- Orange Shades: Bright and cheerful orange tones.
- Red Shades: Bold and vibrant red colors.
- Raspberry Shades: Sweet and rich raspberry tones.
- Fuchsia Shades: Bright and lively fuchsia colors.
You can easily customize the colors by modifying the values in the colors.json
file, or directly in the index.js
, colors.scss
, and colors.css
files. This flexibility allows you to tailor the color palette to fit your project's branding and design requirements.
This project is licensed under the MIT License.
Contributions are welcome! If you have suggestions for improvements or new color palettes, feel free to open an issue or submit a pull request.
Thank you for using Kromatika! We hope this color library enhances your project and streamlines your design process.