https://github.com/0xC0A1/pigment
A powerful library that provides color-conversions, palette/scheme generation, color manipulation and many more features intended to provide a great UX.
https://github.com/0xC0A1/pigment
color-conversions color-schemes cssinjs flat-colors hsl rgb
Last synced: 3 months ago
JSON representation
A powerful library that provides color-conversions, palette/scheme generation, color manipulation and many more features intended to provide a great UX.
- Host: GitHub
- URL: https://github.com/0xC0A1/pigment
- Owner: 0xC0A1
- License: mit
- Archived: true
- Created: 2020-01-31T04:06:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T20:19:28.000Z (8 months ago)
- Last Synced: 2025-07-06T07:06:56.993Z (3 months ago)
- Topics: color-conversions, color-schemes, cssinjs, flat-colors, hsl, rgb
- Language: TypeScript
- Homepage: https://pigment-react-web-example.netlify.com/
- Size: 1.76 MB
- Stars: 29
- Watchers: 0
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Pigment 🌈 - A Colorful JS Framework
## Introduction
Pigment is a lightweight, yet powerful, color framework for the web, react-native (WIP) and any other JS-Based project. It is built on the idea that software applications should function effortlessly while simultaneously maintaining their beautiful interfaces.
With Pigment, you can easily stop tinkering with RGB values, wasting hours figuring out the right color combinations to use in your app, and worrying about whether your text will be readable on the various background colors of your app.
Does this sound familiar? That's because Pigment is heavily inspired by Vicc Alexander's [Chameleon Framework](https://github.com/viccalexander/Chameleon), which provides this functionality for native iOS (OBJC & Swift 3).
## Features
- Color conversions between:
- HEX
- RGB
- HSL
- LAB
- XYZ
- 24 Hand-Picked Flat Colors in both shades (Light and Dark)
- Color shades generation
- Find most similar hand-picked Flat color from another color
- Get contrasting color text (Black / White) from another color
- Generate Color Schemes:
- Analogous
- Complementary
- Triadic
- Compatible with Chameleon Framework's Sketch, PhotoShop and Storyboard [plugins](https://github.com/viccalexander/Chameleon/tree/master/Extras).
## Examples
- App theming with styled-components [example](https://pigment-react-styled-components-example.netlify.com/) / [source](https://github.com/kevinrodriguez-io/pigment/tree/master/apps/react-styled-components-example)
## Installing
```bash
$ yarn add @kevinrodriguez-io/pigment-core
# or
$ npm i @kevinrodriguez-io/pigment-core
```
## Usage
- Wrap your color \* Supported formats: HEX, RGB, HSL
```ts
import { Color, Colors } from '@kevinrodriguez-io/pigment-core'
const hex = Colors.flatRed.light
const color = new Color(hex)
```
- Get complementary color
```ts
color.complementaryColor
```
- Get most similar Hand-Picked Flat color
```ts
color.nearestFlatColor
```
- Get all color shades with a 25% separation
```ts
color.all(25)
color.nearestFlatColor.all(25) // Flat-color shades
```
- Get color tints/shades (Array or single item) with a 25% separation
```ts
color.tints(25)
color.shades(25)
color.tint(25) // Just one color
color.shade(25) // Just one color
```
- Get analogous color scheme (Regular & Flat)
```ts
color.analogousColorScheme
color.analogousFlatColorScheme
```
- Get complementary color scheme
```ts
color.complementaryColorScheme
color.complementaryFlatColorScheme
```
- Get triadic color scheme
```ts
color.triadicColorScheme
color.triadicFlatColorScheme
```
- Get contrasting text color (Black/White)
```ts
color.contrastingTextColor
color.contrastingFlatTextColor // Flat version
```
## Coming soon
- ~~Global-theming examples with styled-components (CSS in JS)~~
- React-based bindings and hooks