Skip to content

Latest commit

 

History

History
106 lines (76 loc) · 4.33 KB

readme.md

File metadata and controls

106 lines (76 loc) · 4.33 KB
Raw

Color

Gives easy access to custom colors and the ability to manipulate them.

It decorates a given color into an object that allows for easy manipulation of the color's proprieties. A format function is also provided to change the output to different color spaces when needed.

Usage

import { generateColor } from 'style-genie'

// default format 'rgba'
const white = generateColor('#fff')

white       // { color: 'rgba(255, 255, 255, 1)' , ... }
white.color // 'rgba(255, 255, 255, 1)'

// explicit format
const black = generateColor('#000', 'hsl')

black       // { color: 'hsl(0, 0%, 0%)' , ... }

Parameters

The generateColor function accepts up to two parameter used to set the default values.

property type description
color string | number | number[] the base color to be decorated
format 'rgba' | 'rgb' | 'hex' | 'hsl' | 'hsla' the default output format of the color

Formats

The color property can accept a various amount of input format. Here they are listed ordered by categories.

  • Number: Either a single number or a number array of [number, number, number]. The number must be a value in the RGB, from 0 to 255.
  • Hex: Can be any type of hex color, short, long or with alpha. '#000', '#000000' or '#000000FF'.
  • RGB: Regular rgb or rgba color format. 'rgb(0, 0, 0)' or 'rgba(0, 0, 0, 1)'.
  • HSL: The hsl or hsla color notation. 'hsl(0, 0%, 0%)' or 'hsla(0, 0%, 0%, 1)'.

Color Object

The color object is the result of the generator function. Apart from the color property shown above, there are a few others.

{
  color: string,
  format: Function,
  manipulate: Function,
  hueShift: Function,
  illuminate: Function,
  saturate: Function,
  opacity: Function,
}

Manipulate

This function allows for manipulation of the color properties in the HSLA model, hue, saturation, lightness and alpha. It accepts a single object with one or more of the following properties.

parameters type description value
hueShift number shifts the hue by the given amount any
illuminate number changes the luminosity value by the given percentage -1.0 - 1.0
saturate number changes the saturation value by the given percentage -1.0 - 1.0
opacity number sets the current opacity to the given number 0.0 - 1.0

Note: the helped functions hueShift, illuminate, saturate and opacity all work as if using the manipulate function with the proper value. Eg: .opacity(0.1) equals .manipulate({ opacity: 0.1 }).

Usage

const color = generateColor('hsl(0, 100%, 30%)', 'hsla')

color.manipulate({ hueShift: 80 })    // 'hsla(80, 100%, 30%, 1)'
color.manipulate({ illuminate: 0.5 }) // 'hsla(0, 100%, 45%, 1)'
color.manipulate({ saturate: -0.3 })  // 'hsla(0, 70%, 30%, 1)'
color.manipulate({ opacity: 0.1 })    // 'hsla(0, 70%, 30%, 0.1)'

Format

Allows the formating of the output color. This might be useful when having to input specific formats for external libraries. It has only one parameter which is the format the output should conform to.

property type description
format 'rgba' | 'rgb' | 'hex' | 'hsl' | 'hsla' output format of the color

Usage

const black = generateColor('rgb(0, 0, 0)')

white.format('hex')    // '#000000'
white.format('rgb')    // 'rgb(0, 0, 0)'
white.format('rgba')   // 'rgba(0, 0, 0, 1)'
white.format('hsl')    // 'hsl(0, 0%, 0%)'
white.format('hsla')   // 'hsla(0, 0%, 0%, 1)'