Have ideas to improve npm?Join in the discussion! »

    optical-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Optical-js

    https://nodei.co/npm/optical-js.png?downloads=true&downloadRank=true&stars=true

    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);

    #ff000080     

    • 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);

    #80ff00     

    • 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);

    #bf4040     

    • 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);

    #ebadad     

    • 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);

    #ebadad     

    • 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);

    #ff3200     

    • 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);

    #ff0032     

    • 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);

    #cb0101     

    • 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);

    #bf4040     

    • 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);

    #ff6666     

    • 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);

    #990000     

    • 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);

    #ff0000cc     

    • 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);

    #00ff51     

    • 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);

    #6400ff     

    • 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);

    #ff6400     

    • 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);

    #ff0064     

    • 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);

    #800080     

    • 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);

    #ff00ff     

    • 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);

    #ff0000     

    • 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);

    #b3004d     

    • 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);

    #ff00ff     

    • 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);

    #c6ff00     

    • 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);

    #ff00ff     

    • 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);

    #a52a00     

    • 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);

    #a5002a     

    • 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);

    #ff2aff     

    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)};
      }
    `;

    Install

    npm i optical-js

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    45.7 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar