# Getting started

It's very simple to comence:

yarn add reshader or npm install reshader

Note: In case you are using RequireJS or want reshader on your window, please refer to the distribution file.

# Usage

  import reshader from 'reshader'

  const { palette } = reshader('#6EEB83')
  

# API

reshader takes two parameters: color and options respectively.

  reshader('#EB6E6E')
  reshader('rgb(235, 110, 110)')
  reshader('hsl(0, 75.8%, 67.6%)')
  

  const {
    palette,
    variations
  } = reshader('#A56EEB', { numberOfVariations: 10 })
  

  const {
    palette,
    variations
  } = reshader('#EBDE6E', { contrastRatio: 0.05 })
  

  const {
    palette,
    variations
  } = reshader('#30B825', { outputModel: 'rgb' })
  

  const {
    palette,
    variations
  } = reshader('#FFFFFF', { shouldIgnoreRepeated: true })
  

  const {
    palette,
    variations
  } = reshader('#6ED0EB', { shouldIgnoreWhites: true })
  

  const {
    palette,
    variations
  } = reshader('#EBA26E', { shouldIgnoreBlacks: true, contrastRatio: 1 })
  

# Understanding palette and variations

reshader('#FF0000') returns an object containing the palette and variations properties. Let's take a look on how they work.

# Accepted output models

The accepted models you can input are slightly different from the ones reshader is capable of output. It only accepts three entrance color models: hex, rgb and hsl, whilst it is capable of output hex (default), rgb, hsl, hsv, cmyk and ansi256. This is because it follows the API provided by its core, Qix's color.

# Motivation

It started when I needed a way to have consistent colors in my css-in-js apps. Unfortunately, picking colors by the eye was not getting me the best results, specially on the long term, and it was consuming unnecessary amounts of time to get the shades I wanted to. Prior to Reshader, I used to have a colors.js file and it used to look like this:

  // ./UI/colors.js

  export const colors = {
    gray: {
      0: '#FAFAFA',
      1: '#F2F2F2',
      2: '#DDDDDD'
    },

    red: {
      0: '#FFBBBB',
      1: '#FF8080',
      2: '#FF5050'
    },

    blue: {
      0: '#B6CBFF',
      1: '#8AABFF',
      2: '#326CFF'
    }
  }
  

  // MyComponent.js

  import React from 'react'
  import styled from 'styled-components'
  import { colors } from './UI'

  const Container = styled.div`
    background-color: ${colors.gray[0]};
  `

  const MyComponent = ({ children }) => <Container>{children}</Container>

  export default MyComponent
  

As you can see, all the colors were handpicked, manually mapped and prone to inconsistencies. But I wanted something programatically, consistent and simple. Then I came up with Reshader and my new colors.js looks just like this:

  import reshader from 'reshader'

  export const colors = {
    gray: reshader('#DDDDDD').palette,
    red: reshader('#FF5050').palette,
    blue: reshader('#326CFF').palette
  }
  

Boom! It's working with the same implementation as before, where gray[0] is the lightest shade and gray[gray.length - 1] is the darkest.

# Frequently Asked Questions

# Author

Guilherme "chiefGui" Oderdenge

A Brazilian JavaScript developer.

Also, a special thanks to Josh Junon, the author of the amazing Color—the library dealing with the magic Reshader uses to create the shades.