Optical-js

A tiny javascript library to manipulate colors

Instalation

npm i optical-js -s

or

yarn add optical-js

Optical-js has a Color constructor or isolated functions that allow you to manipulate colors.

In both cases, using by constructor creator or by functions, your can define a color by using one of the colorFormat:

• Using a rbga object: {r: $red, g: $green, b: $blue, a: $alpha}
• A hsl string: hsl($hue, $saturation, $light)
• A hsla string: hsla($hue, $saturation, $light, $alpha)
• A rba string: rgb($red, $blue, $green)
• A rgba string: rgba($red, $blue, $green, $alpha)
• A 3 digitis hexa string: #000
• A 6 digitis hexa string: #000000
• A color name: blue
• A color instance: new Color(blue)

Any one of this formats is accepted.

When you has a color, you can manipulate then, with transformation methods:

• alpha: (float: [0..1])

Change the alpha channel from this color, accept only decimal values between 0 and 1, Ex:

  new Color('red').alpha(.5) // => rgba(255, 0, 0, 0.5);
  alpha('red', .5) // => rgba(255, 0, 0, 0.5);

    

• hue: (int: [0..360])

Change the hue channel from this color, accept only integer values between 0 and 360, Ex:

  new Color({r: 255, g: 0, b: 0, a: 1}).hue(90) // => rgb(128, 255, 0);
  hue({r: 255, g: 0, b: 0, a: 1}, 90) // => rgb(128, 255, 0);

    

• saturation: (int: [0..100])

Change the saturation channel from this color, accept only integer values between 0 and 100, Ex:

  new Color('rgb(255, 0, 0)').saturation(50) // => rgb(191, 64, 64);
  saturation('rgb(255, 0, 0)', 50) // => rgb(191, 64, 64);

    

• light: (int: [0..100])

Change the light channel from this color, accept only integer values between 0 and 100, Ex:

  new Color('rgba(255, 0, 0, 1)').light(80) // => rgb(235, 173, 173);
  light('rgba(255, 0, 0, 1)', 80) // => rgb(235, 173, 173);

    

• red: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('hsl(0, 100%, 50%)').red(50) // => rgb(50, 0, 0);
  red('hsl(0, 100%, 50%)', 50) // => rgb(50, 0, 0);

    

• green: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('hsla(0, 100%, 50%, 1)').green(50) // => rgb(255, 50, 0);
  green('hsla(0, 100%, 50%, 1)', 50) // => rgb(255, 50, 0);

    

• blue: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').blue(50) // => rgb(255, 0, 50);
  blue('red', 50) // => rgb(255, 0, 50);

    

• saturate: (int: [0..100])

Change the red channel from this color, accept only integer values between 0 and 100, Ex:

  new Color('brown').saturate(40) // => rgb(203, 1, 1);
  saturate('brown'), 40) // => rgb(203, 1, 1);

    

• desaturate: (int: [0..100])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').desaturate(50) // => rgb(191, 64, 64);
  desaturate('red', 50) // => rgb(191, 64, 64);

    

• lighten: (int: [0..100])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').lighten(20) // => rgb(255, 102, 102);
  lighten('red', 20) // => rgb(255, 102, 102);

    

• darken: (int: [0..100])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').darken(20) // => rgb(153, 0, 0);
  darken('red', 20) // => rgb(153, 0, 0);

    

• opacify: (int: [0..1])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').opacify(.2) // => rgba(255, 0, 0, 0.8);
  opacify('red', .2) // => rgba(255, 0, 0, 0.8);

    

• hueRotate: (int: [0..*])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').hueRotate(500) // => rgb(0, 255, 81);
  hueRotate('red', 500) // => rgb(0, 255, 81);

    

• redish: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('blue').redish(100) // => rgb(100, 0, 255);
  redish('blue', 100) // => rgb(100, 0, 255);

    

• greenish: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').greenish(100) // => rgb(255, 100, 0);
  greenish('red', 100) // => rgb(255, 100, 0);

    

• blueish: (int: [0..255])

Change the red channel from this color, accept only integer values between 0 and 255, Ex:

  new Color('red').blueish(100) // => rgb(255, 0, 100);
  blueish('red', 100) // => rgb(255, 0, 100);

    

• multiply: (color: [colorFormat])

Apply Multiply color algorithm, accept all of the colors formats, Ex:

  new Color('red').multiply('blue') // => rgb(128, 0, 128);
  multiply('red', 'blue') // => rgb(128, 0, 128);

    

• screen: (color: [colorFormat])

Apply Screen color algorithm, accept all of the colors formats, Ex:

  new Color('red').screen('blue') // => rgb(255, 0, 255);
  screen('red', 'blue') // => rgb(255, 0, 255);

    

• overlay: (color: [colorFormat])

Apply Overlay color algorithm, accept all of the colors formats, Ex:

  new Color('red').overlay('blue') // => rgb(255, 0, 0);
  overlay('red', 'blue') // => rgb(255, 0, 0);

    

• mix: (color: [colorFormat], weight: [0..1])

Apply Mix color algorithm, accept all of the colors formats, and a weight to represent amount strength is the mixed color, 0.5 is the middle between the colors strength on the mix Ex:

  new Color('red').mix('blue', 30) // => rgb(179, 0, 77);
  mix('red', 'blue', 30) // => rgb(179, 0, 77);

    

• difference: (color: [colorFormat])

Apply Difference color algorithm, accept all of the colors formats, Ex:

  new Color('red').difference('blue') // => rgb(255, 0, 255);
  difference('red', 'blue') // => rgb(255, 0, 255);

    

• divide: (color: [colorFormat])

Apply Divide color algorithm, accept all of the colors formats, Ex:

  new Color('red').divide('blue') // => rgb(198, 255, 0);
  divide('red', 'blue') // => rgb(198, 255, 0);

    

• addition: (color: [colorFormat])

Apply Addition color algorithm, accept all of the colors formats, Ex:

  new Color('red').addition('blue') // => rgb(255, 0, 255);
  addition('red', 'blue') // => rgb(255, 0, 255);

    

• subtract: (color: [colorFormat])

Apply Subtract color algorithm, accept all of the colors formats, Ex:

  new Color('brown').subtract('darkblue') // => rgb(165, 42, 0);
  subtract('brown', 'darkblue') // => rgb(165, 42, 0);

    

• darkenOnly: (color: [colorFormat])

Apply DarkenOnly color algorithm, accept all of the colors formats, Ex:

  new Color('brown').darkenOnly('magenta') // => rgb(165, 0, 42);
  darkenOnly('brown', 'magenta') // => rgb(165, 0, 42);

    

• lightenOnly: (color: [colorFormat])

Apply LightenOnly color algorithm, accept all of the colors formats, Ex:

  new Color('brown').lightenOnly('magenta') // => rgb(255, 42, 255);
  lightenOnly('brown', 'magenta') // => rgb(255, 42, 255);

    

Use case

A famous library call styled-component is very usefull for react aplicattions.

styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

by styled-component

This library replace preprocessors like sass or less, but, styled-components not has alternatives to manipulate colors like less or sass. With optical-js you can continue to use that colors manipulation methods.

import { darken, ligthen } from 'optical-js';
import * as React from 'react';
import styled from 'styled-components';
 
const colors = {
  primary: '#2196f3',
  secondary: '#8bc34a',
  default: '#dedede';
};
 
const getColor = (color) => colors[color] || colors.default;
 
const Button = styled.button`
  background: ${props => getColor(props.color)};
  color: white;
  border: 2px solid ${props => darken(getColor(props.color), 10)};
  border-radius: 3px;
 
  &:hover {
    background: ${props => ligthen(getColor(props.color), 10)};
  }
`;