A tiny javascript library to manipulate colors
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);
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)};
}
`;