Pigment 🌈 - A Colorful JS Framework

Live tool/example

Video

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, 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.

Examples

• App theming with styled-components example / source

Installing

npm i @kevinrodriguez-io/pigment-core --save

or

yarn add @kevinrodriguez-io/pigment-core

Usage

• Wrap your color * Supported formats: HEX, RGB, HSL

import { Color, Colors } from '@kevinrodriguez-io/pigment-core'

const hex = Colors.flatRed.light
const color = new Color(hex)

• Get complementary color

color.complementaryColor

• Get most similar Hand-Picked Flat color

color.nearestFlatColor

• Get all color shades with a 25% separation

color.all(25)
color.nearestFlatColor.all(25) // Flat-color shades

• Get color tints/shades (Array or single item) with a 25% separation

color.tints(25)
color.shades(25)
color.tint(25) // Just one color
color.shade(25) // Just one color

• Get analogous color scheme (Regular & Flat)

color.analogousColorScheme
color.analogousFlatColorScheme

• Get complementary color scheme

color.complementaryColorScheme
color.complementaryFlatColorScheme

• Get triadic color scheme

color.triadicColorScheme
color.triadicFlatColorScheme

• Get contrasting text color (Black/White)

color.contrastingTextColor
color.contrastingFlatTextColor // Flat version

Coming soon

• Global-theming examples with styled-components (CSS in JS)
• Global-theming examples with emotion/native
• Get color scheme from image (Web)
• Get color scheme from image (React-Native)
• Machine-Learning JS models for color scheme generation
• CSS Global Theme Generation
• CSS Houdini Paint Worklets to support conversions and derived colors

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Kevin Rodríguez 📖 💻 🤔 ⚠️

Vicc Alexander 🤔

Kevin Wolf 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!