/pigment

A powerful library that provides color-conversions, palette/scheme generation, color manipulation and many more features intended to provide a great UX.

Primary LanguageTypeScriptMIT LicenseMIT

Logo

Pigment 🌈 - A Colorful JS Framework

Watch on GitHub Star on GitHub Tweet!

@kevinrodriguez-io/pigment lerna npm

Live tool/example

Video

Video example

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

Flat Colors

Features

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

Installing

$ yarn add @kevinrodriguez-io/pigment-core
# or
$ npm i @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)
  • React-based bindings and hooks

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!