@skchr/color
    Preparing search index...

    Class Color

    Creates a lazy chain wrapper over a single color token that has all the functions that take a ColorToken as their first argument.

    import { Color } from '@skchr/color'

    let wrapper = new Color('pink');

    console.log(wrapper.color2hex());
    // #ffc0cb
    Index

    Constructors

    constructor

    Methods

    achromatic alpha contrast deficiency earthtone family hueshift lightness luminance mc output pair pastel saturation scheme temp token via

    Constructors

    Methods

    • Returns true if the bound color has hue or is grayscale elsColorspaces} [colorspace='lch'] The colorspace to use when checking if the color is grayscale or not.

      Returns boolean

      import { color } from "@skchr/color";
      import { formatHex8, interpolate, samples } from "culori"

      var test = c => color(c).isAchromatic()


      test('pink')
      // false

      let sample = [
      "#164100",
      "#ffff00",
      "#310000",
      'pink'
      ];

      console.log(sample.map(test));

      // [false, false, false,false]

      test('gray')

      // true



      // we create an interpolation using black and white
      let f = interpolate(["black", "white"]);

      //We then create 12 evenly spaced samples and pass them to f as the `t` param required by an interpolating function.
      // Lastly we convert the color to hex for brevity for this example (otherwise color objects work fine too.)
      let grays = samples(12).map((c) => formatHex8(f(c)));
      console.log(grays.map(test));

      //
      [ false, true, true,
      true,  true, true,
      true,  true, true,
      true,  true, false
      ]

    • Sets/Gets the opacity or alpha channel of a color. If the value parameter is omitted it gets the bound color's alpha value. *

      Parameters

      • Optionalamount: string | number

        The value to apply to the opacity channel. The value is normalized to the range [0,1]. *

      Returns ColorToken

      • The alpha channel value if amount is omitted, or the color token with the new alpha.
      import { color } from '@skchr/color';

      // Getting the alpha
      console.log(color('#a1bd2f0d').alpha())
      // 0.050980392156862744

      // Setting the alpha
      let myColor = color('b2c3f1')alpha(0.5)

      console.log(myColor)

      // #b2c3f180

    • Gets the contrast value between the bound and comparison ( or against) color. *

      Parameters

      • Optionalagainst: ColorToken

        The color to use for comparison. The default is 'black'. *

      Returns number

      • The contrast ratio between the bound color and the comparison color.
      * import { color } from '@skchr/color'
       *
       * console.log(color('pink').contrast('yellow'))
      // 1.4322318222624262

    • Simulates how a color may be perceived by people with color vision deficiency.

      To avoid writing the long types, the expected parameters for the kind of blindness are simply the colors that are hard to perceive for the type of color blindness:

      • 'tritanopia' - An inability to distinguish the color 'blue'. The kind is 'blue'.

      • 'deuteranopia' - An inability to distinguish the color 'green'.. The kind is 'green'.

      • 'protanopia' - An inability to distinguish the color 'red'. The kind is 'red'.

      Parameters

      • Optionaloptions: DeficiencyOptions

        Options to customize the color vision deficiency simulation. *

      Returns ColorToken

      • The simulated color as perceived by the specified color vision deficiency. *
      * import { color } from '@skchr/color'
         
         // Here we are simulating color blindness of tritanomaly or we can't see 'blue'.
         // We are passing in our color as an array of channel values in the mode "rgb". The severity is set to 0.1
         let tritanomaly = color(['rgb', 230, 100, 50, 0.5]).colorDeficiency('blue', 0.1)
         console.log(tritanomaly)
       // #dd663680
       
       // Here we are simulating color blindness of tritanomaly or we can't see 'red'. The severity is not explicitly set so it defaults to 1
       let protanopia = color({ h: 20, w: 50, b: 30, mode: 'hwb' }).colorDeficiency('red')
       console.log(protanopia)
       // #9f9f9f

    • Creates a color scale between an earth tone and any color token using spline interpolation.

      Parameters

      • Optionaloptions: EarthtoneOptions

        Optional overrides for customising interpolation and easing functions.

      Returns
          | string
          | number
          | boolean
          | object
          | ColorTuple
          | ColorToken[]
          | Map<string | number, ColorToken>
          | Set<ColorToken>

      • The interpolated earth tone color(s) or the chainable instance.
      import { color } from '@skchr/color'

      let base = 'purple'

      console.log(color(base).earthtone({num:8}))

      ColorArray {
      colors: [
       '#352a21', '#3e2825',
       '#4c2624', '#5f2028',
       '#741033', '#860040',
       '#940049', '#99004b'
      ]
      }

      console.log(color(base).earthtone({ iterations:8 }).output())
      // call output() to only get results array

      // [
       '#352a21', '#3e2825',
       '#4c2624', '#5f2028',
       '#741033', '#860040',
       '#940049', '#99004b'
      ]

    • Gets the hue family which a color belongs to with the overtone included (if it has one.).

      For example 'red' or 'blue-green'. If the color is achromatic it returns the string 'gray'.

      Returns { bias: false | ColorFamily; hue: never }

      import { color } from '@skchr/color'


      console.log(color("#310000").family())
      // 'red'
      • Creates a palette of hue shifted colors from the passed in color.

      Hue shifting means that:

      • As a color becomes lighter, its hue shifts up (increases).
      • As a color becomes darker its hue shifts down (decreases).

      The minLightness and maxLightness values determine how dark or light our color will be at either extreme respectively.

      The length of the resultant array is the number of samples (num) mult lied by 2 plus the base color passed in or (num * 2) + 1.

      Parameters

      • Optionaloptions: HueshiftOptions

        The optional overrides object to customize the hue shift options like easing function. *

      Returns Collection

      • A collection of hue-shifted colors. *
      import { color } from "@skchr/color";
       
       let hueShiftedPalette = color("#3e0000").hueShift({ iterations:1 });
       
       console.log(hueShiftedPalette);
       
       // [
         '#ffffe1', '#ffdca5',
         '#ca9a70', '#935c40',
         '#5c2418', '#3e0000',
         '#310000', '#34000f',
         '#38001e', '#3b002c',
         '#3b0c3a'
       ]

    • Darkens the bound color by reducing the lightness channel by amount of the channel. For example 0.3 means reduce the lightness by 0.3 of the channel's current value.

      Parameters

      • Optionalamount: number

        The amount to darken with. The value is expected to be in the range [0,1]. Default is 0.1.

      • darken: boolean = false

      Returns ColorToken

      • The darkened or lightened color token.
      import { color } from "@skchr/color";
      console.log(color('blue').darken(0.3));
      //#464646

    • Gets the luminance of the passed in color token.

      If the amount parameter is not passed in else it will adjust the luminance by interpolating the color with black (to decrease luminance) or white (to increase the luminance) by the specified amount. *

      Parameters

      • Optionalamount: number

        The luminance value to set on the bound color. *

      Returns ColorToken

      • The luminance value if amount is omitted, or the color token with the new luminance.
      import { color } from '@skchr/color'

      let myColor = 'green';
      console.log(color(myColor).luminance());
      // 0.1543834296814607

      console.log(color(myColor)._luminance);
      // 0.1543834296814607

      console.log(color(myColor).luminance(0.5));

    • Sets the value of the specified channel on the passed in color.

      If the amount parameter is undefined it gets the value of the specified channel. *

      Parameters

      • modeChannel: string

        The mode and channel to be retrieved. For example rgb.b will return the value of the blue channel's value in the RGB color space of that color. *

      • Optionalvalue: string | number

        The value to set on the queried channel. Also supports expressions as strings e.g "#fc23a1" "*0.5". The supported symbols: * + - /. *

      Returns ColorToken

      • The channel value if value is omitted, or the color token with the new channel value. *
      import { color } from '@skchr/color'

      console.log(color('#a1bd2f').mc('rgb.g'))
      // 0.7411764705882353

    • Returns the final value from the chain.

      Returns ColorToken

      import { color } from '@skchr/color'

      let myOutput = color(['rgb',200,34,65]).output()

      console.log(myOutput)
      // ['rgb',200,34,65]

    • Creates a palette that consists of a baseColor that is incremented by a hueStep to get the final color to pair with. The colors are then spline interpolated via white or black.

      A negative hueStep will pick a color that is hueStep degrees behind the base color.

      Parameters

      • Optionaloptions: PairedSchemeOptions

        The optional overrides object to customize per channel options like interpolation methods and channel fixups.

      Returns
          | string
          | number
          | boolean
          | object
          | ColorTuple
          | ColorToken[]
          | Map<string | number, ColorToken>
          | Set<ColorToken>

      • The paired color scheme as a collection or a single color token.
      import { color } from '@skchr/color'

      console.log(color("green").pairedScheme({hueStep:6,samples:4,tone:'dark'}))
      // [ '#008116ff', '#006945ff', '#184b4eff', '#007606ff' ]

    • Returns a randomized pastel variant of the bound color token. Preserves the bound ColorToken type.

      Returns ColorToken

      import { color } from '@skchr/color';

      console.log(color("green").pastel())

      // #036103ff

    • Sets/Gets the saturation value of the bound color. *

      Parameters

      • Optionalamount: number

        The amount of saturation to set on the bound color token. Also supports string expressions. *

      Returns ColorToken

      • The saturation value if amount is omitted, or the color token with the new saturation.
      *
        import { color } from '@skchr/color'


      let myColor = ['lch',60,13,0.5]

      console.log(color(myColor).saturation())
      // 13

      console.log(color(myColor).saturation("*0.3"))

      // ['lch',60,19.9,0.5]

    • Returns a randomised classic color scheme from the bound color.

      Parameters

      Returns Collection

      import { color  } from '@skchr/color'

      console.log(color("#a1bd2f").scheme("triadic"))
      // [ '#a1bd2fff', '#00caffff', '#ff78c9ff' ]

    • Returns a rough estimation of a color's temperature as either 'cool' or 'warm'.

      Returns "warm" | "cool"

      import { color } from '@skchr/color'

      let sample = [
      "#00ffdc",
      "#00ff78",
      "#00c000"
      ];



      console.log(color(sample[2]).temp());
      // 'warm'

    • Parses any recognizable color to the specified kind of ColorToken type.

      The kind option supports the following types as options:

      • 'array' - Parses the color token to an array of channel values with the colorspace as the first element if the omitMode parameter is set to false in the options object.

      • 'number' - Parses the color token to its numerical equivalent to a number between 0 and 16,777,215.

      The numberType can be used to specify which type of number to return if the kind option is set to 'number':

      • 'hexadecimal'
      • 'binary'
      • 'octal'
      • 'decimal' exponential notation
      • 'hex' - Parses the color token to its hexadecimal string equivalent.

      If the color token has an explicit alpha (specified by the alpha key in color objects and as the fourth and last number in a color array) the string will be 8 characters long instead of 6.

      • 'object' - Parses the color token to a plain color object in the mode specified by the targetMode parameter in the options object.

      Parameters

      Returns ColorToken

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods