Kromatika

An open-source color palette ready to use in web des

Kromatika

Kromatika is a free and open-source color palette ready to use in web design and user interfaces.

Kromatika Color Library

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.

Official site

Installation

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

Usage

Importing Colors

You can import the colors into your JavaScript, JSON, SCSS and CSS files as needed.

JavaScript

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:

```json
"metal":[

"#F3F4F7",

"#E2E4EB",

"#CCD0DC",

"#B3BACB",

"#9BA4BA",

"#828DA9",

"#626E8E",

"#49526A",

"#303646",

"#191C24"

]

// Add more color categories as needed
}

YAML

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

SCSS

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); }

LESS

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; }

Stylus

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

CSS

@import "kromatika/colors.css"; // Example usage: body { background-color: var(--kr-charcoal-50); /* Using a black shade */ }

Available Colors

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.

Customization

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.