reshader

Create shadings—lighter or darker—out of any color you want from the most popular models out there.

Getting started

yarn add reshader or npm install reshader

import reshader from 'reshader'

const { palette: reds } = reshader('#ff0000')

console.log(reds) // outputs the following array:
/**
  * [
  *   '#FF9C9C',
  *   '#FF7777',
  *   '#FF5555',
  *   '#FF3636',
  *   '#FF1A1A',
  *   '#FF0000',
  *   '#E60000',
  *   '#CF0000',
  *   '#BA0000',
  *   '#A70000',
  *   '#960000'
  * ]
  **/

Usage

reshader is a standalone function that gets variations from colors out of the box and returns an object with four properties that return arrays:

• palette: that contains all the colors, from the lightest to the darkest, with the base color right in the middle of the array.
• variations: that contains only the variations, without the base color.
• lighterColors: that contains only the lighter colors, without the base.
• darkerColors: that contains only the darker colors, without the base.

To wrap up:

const { palette, variations, lighterColors, darkerColors } = reshader('#ff0000')

API

reshader accepts two arguments: color: String and options: Object.

color

The color you want to get variations from. It must be a string in one of these models: hex, rgb, hsl, hsv, cmyk, ansi256

Type	Default	Demo
string	null	reshader('#ff0000')

(options) numberOfVariations

The number of variations from the given color. In our example below, the base color is #ff0000 and numberOfVariations is 5. The result will be 5 lighter colors and 5 darker colors.

Type	Default	Demo
number	10	reshader('#ff0000', { numberOfVariations: 5 })

(options) contrast

The contrast between the variations. Lower numbers will result in subtler variations whilst higher numbers will result in stiffer variations.

Type	Default	Demo	Note
number	0.1	reshader('#ff0000', { contrast: 0.2 })	Min: 0.1, max: 1

(options) model

The output model of the colors, ignoring the input model. That being said, if you input #ff0000 and your model is rgb, then the model of each returned color will come as rgb, even the base color which will be rgb(255, 0, 0).

Type	Default	Demo	Note
string	hex	reshader('#ff0000', { model: 'rgb' })	One of: hex, rgb, hsl, hsv, cmyk, ansi256

Tests

yarn test or npm run test

Why?

The major part of my projects are built on the top of React, and most of them use css-in-js. To deal with the colors of these projects, I usually create a file called colors.js on an UI/ folder that exports all the colors I'm going to use. To demonstrate the shape:

export default {
  gray: {
    0: '#FFFFFF',
    10: '#FAFAFA',
    50: '#CCCCCC',
    100: '#222222'
  },

  red: {
    50: '#FF0000'
  }
}

Then, to get these colors I just need to:

// Header.js
import React from 'react'
import styled from 'styled-components'

import colors from './UI/colors'

const Header = styled.header`
  background-color: ${colors.red[50]}
`

The problem is that I always create inconsistent variations and loose time figuring out the best matches. The solution came leaving this responsibility to someone that has knowledge about this business, which eventually is reshader.

It's also worth to note that reshader relies directly on the great Qix-'s color. It is the one dealing with the mathematics needed to create the variations and reshader is just an abstraction that uses its functionalities to create the magical and consistent shading palettes I was in need of.