The @kirklin/palette library is a utility for generating color palettes based on a given color and index. It provides functions to create color variations for different purposes such as light and dark themes. This README will explain the usage of the library and its core functionalities.
You can install the library using npm:
npm install @kirklin/paletteThe library offers various functions for generating color palettes. Let's go through the key components of the provided code.
To generate a color palette, you need to import the necessary functions from the library:
import { generateColorPalettes } from "@kirklin/palette";The generateColorPalettes function allows you to create an array of color variations based on a given color. By default, it generates color variations for light themes. You can also specify whether you want to generate colors for a dark theme and provide a mix color for the dark theme.
const color = "#F53F3F"; // Example color
const lightPalettes = generateColorPalettes(color); // Generates light color palettes
const darkPalettes = generateColorPalettes(color, true); // Generates dark color palettesThe library provides preset primary colors that you can use as a starting point for generating color palettes. These colors are stored in the presetPrimaryColors object:
import { presetPrimaryColors } from "@kirklin/palette";
const redColor = presetPrimaryColors.red; // Example preset primary color
const redPalettes = generateColorPalettes(redColor);The generated color palettes are arrays of hex color values. You can access specific colors in the palette using array indexing:
const mainColor = redPalettes[5]; // Main color in the palette
const lighterColor = redPalettes[3]; // Lighter color in the paletteThe library exports various components that can be used for easier access to colors and palettes:
presetPalettes: An object containing preset primary colors and their corresponding palettes.presetDarkPalettes: An object containing preset primary colors and their corresponding dark theme palettes.- Individual color variables (e.g.,
red,green) that provide easy access to color palettes.
import { generateColorPalettes, presetPrimaryColors } from "@kirklin/palette";
const mainColor = presetPrimaryColors.blue;
const lightPalettes = generateColorPalettes(mainColor);
const darkPalettes = generateColorPalettes(mainColor, true);