Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kirklin/palette
color palettes
https://github.com/kirklin/palette
palettes
Last synced: about 2 months ago
JSON representation
color palettes
- Host: GitHub
- URL: https://github.com/kirklin/palette
- Owner: kirklin
- License: mit
- Created: 2023-08-27T03:29:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T14:23:44.000Z (4 months ago)
- Last Synced: 2024-11-01T21:42:22.405Z (2 months ago)
- Topics: palettes
- Language: TypeScript
- Homepage: https://palette-examples.vercel.app
- Size: 717 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @kirklin/palette
[![CI][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript_code style][code-style-image]][code-style-url]
[ci-image]: https://github.com/kirklin/palette/actions/workflows/release.yml/badge.svg?branch=main
[ci-url]: https://github.com/kirklin/palette/actions/workflows/release.yml
[npm-image]: https://img.shields.io/npm/v/@kirklin/palette.svg
[npm-url]: https://npmjs.org/package/@kirklin/palette
[downloads-image]: https://img.shields.io/npm/dm/@kirklin/palette.svg
[downloads-url]: https://npmjs.org/package/@kirklin/palette
[code-style-image]: https://img.shields.io/badge/code__style-%40kirklin%2Feslint--config-brightgreen
[code-style-url]: https://github.com/kirklin/eslint-config/
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.
## Installation
You can install the library using npm:
```bash
npm install @kirklin/palette
```
## Usage
The library offers various functions for generating color palettes. Let's go through the key components of the provided code.
### Generating Color Palettes
To generate a color palette, you need to import the necessary functions from the library:
```javascript
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.
```javascript
const color = "#F53F3F"; // Example color
const lightPalettes = generateColorPalettes(color); // Generates light color palettes
const darkPalettes = generateColorPalettes(color, true); // Generates dark color palettes
```
### Using Preset Colors
The 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:
```javascript
import { presetPrimaryColors } from "@kirklin/palette";
const redColor = presetPrimaryColors.red; // Example preset primary color
const redPalettes = generateColorPalettes(redColor);
```
### Accessing Generated Palettes
The generated color palettes are arrays of hex color values. You can access specific colors in the palette using array indexing:
```javascript
const mainColor = redPalettes[5]; // Main color in the palette
const lighterColor = redPalettes[3]; // Lighter color in the palette
```
### Exported Components
The 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.
## Examples
```javascript
import { generateColorPalettes, presetPrimaryColors } from "@kirklin/palette";
const mainColor = presetPrimaryColors.blue;
const lightPalettes = generateColorPalettes(mainColor);
const darkPalettes = generateColorPalettes(mainColor, true);
```
## License
[MIT](./LICENSE) License © 2023-PRESENT [Kirk Lin](https://github.com/kirklin)