Minimalist Color Manipulation Library – color2k

Category: Color , Javascript , Recommended | September 7, 2020
Author:ricokahler
Views Total:15 views
Official Page:Go to website
Last Update:September 7, 2020
License:MIT

Preview:

Minimalist Color Manipulation Library – color2k

Description:

A minimalist color manipulation library written in pure JavaScript.

color2k is a tiny (1.4kb), modular, feature-rich JavaScript color library to parse and manipulate colors in your web app.

Created with the use case of CSS-in-JS in mind and supports only RGBa and HSLa as outputs.

Installation:

# NPM
$ npm install color2k --save

How to use it:

Adjust Hue Module:

Adjusts the current hue of the color by the given degrees. Wraps around when over 360. Possible parameters:

  • color: input color
  • degrees: degrees to adjust the input color, accepts degree integers (0 – 360) and wraps around on overflow
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:

  • color: input color
  • amount: amount the amount to darken, given as a decimal between 0 and 1
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 color by the given amount via subtracting from the `s` in `hsla`. Possible parameters:

  • color: input color
  • amount: amount to desaturate, given as a decimal between 0 and 1
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 colors. Possible parameters:

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

Get Luminance Module:

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

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

Get Scale Module:

Given a series colors, this function will return a `scale(x)` function that accepts a percentage as a decimal between 0 and 1 and returns the color at that percentage in the scale. Possible parameters:

  • color: input color
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:

A simple guard function. Possible parameters:

  • low
  • high
  • value
import { guard } from 'color2k';
test('0 1 2', () => {
  expect(guard(0, 1, 2)).toBe(1);
});

Has Bad Contraste Module:

Returns whether or not a color has bad contrast according to a given standard. Possible parameters:

  • color: input color
  • standard: ‘decorative’ | ‘readable’ | ‘aa’ | ‘aaa’ = ‘aa’
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 parts and constructs an hsla string. Possible parameters:

  • hue: The color circle (from 0 to 360) – 0 (or 360) is red, 120 is green, 240 is blue
  • saturation: Percentage of saturation, given as a decimal between 0 and 1
  • lightness: Percentage of lightness, given as a decimal between 0 and 1
  • alpha: Percentage of opacity, given as a decimal between 0 and 1
import { hsla } from 'color2k';
test('hsla white', () => {
  expect(hsla(0, 1, 1, 1)).toMatchInlineSnapshot(`"hsla(0, 100%, 100%, 1)"`);
});

Lighten Module:

Lightens a color by a given amount. This is equivalent to `darken(color, -amount)`. Possible parameters:

  • color: input color
  • amount: amount the amount to lighten, given as a decimal between 0 and 1
import { lighten } from 'color2k';
test('black', () => {
  expect(lighten('black', 0.1)).toMatchInlineSnapshot(`"hsla(0, 0%, 10%, 1)"`);
});

Mix Module:

Mixes two colors together. Taken from sass’s implementation. Possible parameters:

  • Color 1
  • Color 2
  • Weight (number)
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 color and un-transparentizes it. Equivalent to `transparentize(color, -amount)`. Possible parameters:

  • color: input color
  • amount: the amount to darken, given as a decimal between 0 and 1
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 color and un-transparentizes it. Equivalent to `transparentize(color, -amount)`. Possible parameters:

  • color: input color
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 best contrast depending on the luminosity of the given color. Possible parameters:

  • color: input color
import { readableColor } from 'color2k';
it('readableColor white', () => {
  expect(readableColor('white')).toMatchInlineSnapshot(`"#000"`);
});

Readable Color Is Black Module:

Returns black or white for best contrast depending on the luminosity of the given color. Possible parameters:

  • color: input color
import { readableColorIsBlack } from 'color2k';
test('contrastsWithWhite white', () => {
  expect(readableColorIsBlack('white')).toBe(true);
});

RGBA Module:

Takes in rgba parts and returns an RGB string. Possible parameters:

  • red: The amount of red in the red channel, given in a number between 0 and 255 inclusive
  • green: The amount of green in the red channel, given in a number between 0 and 255 inclusive
  • blue: The amount of blue in the red channel, given in a number between 0 and 255 inclusive
  • alpha: Percentage of opacity, given as a decimal between 0 and 1
import { rgba } from 'color2k';
test('red', () => {
  expect(rgba(255, 0, 0, 1)).toMatchInlineSnapshot(`"rgba(255, 0, 0, 1)"`);
});

Saturate Module:

Saturates a color by converting it to `hsl` and increasing the saturation amount. Equivalent to `desaturate(color, -amount)`. Possible parameters:

  • color: input color
  • amount: the amount to darken, given as a decimal between 0 and 1
import { saturate } from 'color2k';
test('red 50%', () => {
  expect(saturate('hsl(0, 50%, 50%)', 0.1)).toMatchInlineSnapshot(
    `"hsla(0, 60%, 50%, 1)"`
  );
});

Transparentize Module:

Saturates a color by converting it to `hsl` and increasing the saturation amount. Equivalent to `desaturate(color, -amount)`. Possible parameters:

  • color: input color
  • amount: the amount to darken, given as a decimal between 0 and 1
import { transparentize } from 'color2k';
it('works', () => {
  expect(transparentize('white', 0.1)).toMatchInlineSnapshot(
    `"rgba(255, 255, 255, 0.9)"`
  );
});

Convert color into Hex:

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

Convert color into Hsla:

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

Convert color into Rgba:

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

Changelog:

v1.1.0 (07/20/2020)

  • adds 3 new functions to help you display any color as a string

v1.0.0 (07/20/2020)

  • stable

You Might Be Interested In:


Leave a Reply