color2k is a colour analysis and processing library with the goal of keeping the package size as small as possible while still meeting all of the colour processing needs of the sRGB space.

typescript color string, color parse, javascript colour library

A minimalist colour manipulation library is written in pure JavaScript.

Beautiful Color Picker Supports Gradient Mode | xncolorpicker

How to make use of it:

Installation:

# NPM
$ npm install color2k --save

Adjust the Hue Module:

Adjusts the present hue of the colour by the given levels. Wraps around when over 360. Possible parameters:

import { adjustHue } from 'color2k';

// example
test('red 180', () => {
  expect(adjustHue('red', 180)).toMatchInlineSnapshot(
    `"hsla(180, 100%, 50%, 1)"`
  );
});

Darken Module:

Darkens using lightness. This is equivalent to subtracting the lightness from the L in HSL. Possible parameters:

import { darken } from 'color2k';

test('darken black (no-op)', () => {
  expect(darken('black', 0.1)).toMatchInlineSnapshot(`"hsla(0, 0%, 0%, 1)"`);
});

Desaturate Module:

Desaturates the input colour by the given quantity by way of subtracting from the `s` in `hsla`. Possible parameters:

import { desaturate } from 'color2k';

test('red 10%', () => {
  expect(desaturate('red', 0.5)).toMatchInlineSnapshot(
    `"hsla(0, 50%, 50%, 1)"`
  );
});

Get Contrast Module:

Returns the contrast ratio between two colours. Possible parameters:

import { getContrast } from 'color2k';

it('should return the color contrast of two hex colors', () => {
  expect(getContrast('#444', '#fff')).toMatchInlineSnapshot(
    `9.739769120526205`
  );
});

Get the Luminance Module:

Returns a number (float) representing the luminance of a colour. Possible parameters:

import { getLuminance } from 'color2k';

it('should return the luminance of a hex color', () => {
  expect(getLuminance('#444')).toMatchInlineSnapshot(`0.05780543019106723`);
});

Get Scale Module:

Given a sequence colour, this function will return a `scale(x)` function that accepts a percentage as a decimal between 0 and 1 and returns the colour at that percentage within the scale.

import { getScale } from 'color2k';

test('red, green, blue', () => {
  const scale = getScale('red', 'yellow', 'green');
  expect(scale(0)).toMatchInlineSnapshot(`"rgba(255, 0, 0, 1)"`);
  expect(scale(0.1)).toMatchInlineSnapshot(`"rgba(255, 51, 0, 1)"`);
  expect(scale(0.2)).toMatchInlineSnapshot(`"rgba(255, 102, 0, 1)"`);
  expect(scale(0.3)).toMatchInlineSnapshot(`"rgba(255, 153, 0, 1)"`);
  expect(scale(0.4)).toMatchInlineSnapshot(`"rgba(255, 204, 0, 1)"`);
  expect(scale(0.5)).toMatchInlineSnapshot(`"rgba(255, 255, 0, 1)"`);
  expect(scale(0.6)).toMatchInlineSnapshot(`"rgba(204, 230, 0, 1)"`);
  expect(scale(0.7)).toMatchInlineSnapshot(`"rgba(153, 204, 0, 1)"`);
  expect(scale(0.8)).toMatchInlineSnapshot(`"rgba(102, 179, 0, 1)"`);
  expect(scale(0.9)).toMatchInlineSnapshot(`"rgba(51, 153, 0, 1)"`);
  expect(scale(1)).toMatchInlineSnapshot(`"rgba(0, 128, 0, 1)"`);
});

Guard Module:

An easy guard function. Possible parameters:

import { guard } from 'color2k';

test('0 1 2', () => {
  expect(guard(0, 1, 2)).toBe(1);
});

Has Bad Contraste Module:

Returns whether or not or not a colour has a dangerous contrast in response to a given normal. Possible parameters.

import { hasBadContrast } from 'color2k';

test('blue', () => {
  // blue should be fine for all of these
  expect(hasBadContrast('blue', 'decorative')).toBe(false);
  expect(hasBadContrast('blue', 'readable')).toBe(false);
  expect(hasBadContrast('blue', 'aa')).toBe(false);
  expect(hasBadContrast('blue', 'aaa')).toBe(false);
});

HSLA Module:

Takes in hsla components and constructs an hsla string. Possible parameters:

import { hsla } from 'color2k';

test('hsla white', () => {
  expect(hsla(0, 1, 1, 1)).toMatchInlineSnapshot(`"hsla(0, 100%, 100%, 1)"`);
});

Lighten Module:

Lightens a colour by a given quantity. This is equal to `darken(colour, -amount)`.

import { lighten } from 'color2k';

test('black', () => {
  expect(lighten('black', 0.1)).toMatchInlineSnapshot(`"hsla(0, 0%, 10%, 1)"`);
});

Mix Module:

Mixes two colours together. Taken from sass’s implementation.

import { mix } from 'color2k';

test('mix red with white', () => {
  expect(mix('red', 'white', 0.5)).toMatchInlineSnapshot(
    `"rgba(255, 128, 128, 1)"`
  );
});

Opacify Module:

Takes a colour and un-transparentizes it. Equivalent to `transparentize(colour, -amount)`.

import { opacify } from 'color2k';

it('works', () => {
  expect(opacify('rgba(255, 255, 255, 0.5)', 0.1)).toMatchInlineSnapshot(
    `"rgba(255, 255, 255, 0.6)"`
  );
});

Parse To Hsla Module:

Takes a colour and un-transparentizes it. Equivalent to `transparentize.

import { parseToHsla } from 'color2k';

test('white', () => {
  expect(parseToHsla('white')).toMatchInlineSnapshot(`
    Array [
      0,
      0,
      1,
      1,
    ]
  `);
});

Parse To RGBA Module:

import { parseToRgba } from 'color2k';

test('white', () => {
  expect(parseToRgba('#0f08')).toMatchInlineSnapshot(`
    Array [
      0,
      255,
      0,
      0.5333333333333333,
    ]
  `);
});

Readable Color Module:

Returns black or white for greatest contrast depending on the luminosity of the given colour.

import { readableColor } from 'color2k';

it('readableColor white', () => {
  expect(readableColor('white')).toMatchInlineSnapshot(`"#000"`);
});

RGBA Module:

Takes in rgba components and returns an RGB string.

import { rgba } from 'color2k';

test('red', () => {
  expect(rgba(255, 0, 0, 1)).toMatchInlineSnapshot(`"rgba(255, 0, 0, 1)"`);
});

Saturate Module:

Saturates a colour by changing it to `hsl` and rising the saturation amount.

import { saturate } from 'color2k';

test('red 50%', () => {
  expect(saturate('hsl(0, 50%, 50%)', 0.1)).toMatchInlineSnapshot(
    `"hsla(0, 60%, 50%, 1)"`
  );
});

Convert colour into Hex:

import { toHex } from 'color2k';

test('hex w/ transparency', () => {
  expect(toHex('#0000ff55')).toMatchInlineSnapshot(`"#0000ff55"`);
});

Convert colour into Hsla:

import { toHsla } from 'color2k';

test('hex w/ transparency', () => {
  expect(toHsla('#00ff0080')).toMatchInlineSnapshot(
    `"hsla(120, 100%, 50%, 0.502)"`);
});

Convert colour into Rgba:

import { Rgba } from 'color2k';

test('hex w/ transparency', () => {
  expect(toRgba('#00ff0080')).toMatchInlineSnapshot(`"rgba(0, 255, 0, 0.502)"`);
})

Minimalist Color Manipulation Library, color manipulation typescript

See Demo And Download

Official Website(ricokahler): Click Here

This superior jQuery/javascript plugin is developed by ricokahler. For extra Advanced Usages, please go to the official website.