kuloer

A lightning-fast CSS color parsing and manipulation library with a tiny footprint

Usage no npm install needed!

<script type="module">
  import kuloer from 'https://cdn.skypack.dev/kuloer';
</script>

README

Kulør

A lightning-fast CSS color parsing and manipulation library with a tiny footprint

Build Status Coverage Status Inline docs

Kulør is a library for working with color units from the CSS3 Color Module using a JavaScript API. The library is tweaked to provide excellent performance whilst keeping its footprint as small as possible. The primary use case of the library is checking color contrasts in accordance with the Web Content Accessibility Guidelines.

Contents

Installation

$ yarn add kuloer

Usage

Try out Kulør in your browser

import Color, {contrast} from 'kuloer';

const pink = new Color('pink');
const blue = new Color('#00f');

contrast(pink, blue);

API

Color

constructor

Parse a color string to a color object.

Parameters

  • color string The color string to parse.

Examples

const red = new Color('rgba(255,0,0,.5)');

Color {
  hex: 0xff0000,
  rgb: [255, 0, 0],
  hsl: [0, 1, 0.5],
  alpha: 0.5
}

hex

The color represented as an rgb hex value.

Returns number

rgb

The color represented as an rgb triple.

Returns Array<number>

hsl

The color represented as an hsl triple.

Returns Array<number>

alpha

The alpha value of the color.

Returns number

luminance

Compute the relative luminance of a color.

Parameters

  • color Color The color to compute the luminance of.

Examples

luminance(new Color('#7fffd4'));
// => 0.808

Returns number The relative luminance of the color.

contrast

Compute the contrast ratio between two colors.

Parameters

  • colorA Color The first color.
  • colorB Color The second color.

Examples

contrast(new Color('#ffc0cb'), new Color('#ff69b4'));
// => 1.721

Returns number The contrast ratio between the colors.

composite

Compute the composite of several colors according to alpha compositing.

Parameters

  • colors Array<Color> The colors to compute the composite of.

Examples

composite([new Color('red'), new Color('rgba(0,0,255,.5)')]);

Color {
  hex: 0x800080,
  rgb: [128, 0, 128],
  hsl: [300, 1, 0.25],
  alpha: 1
}

Returns Color The composite color.

License

Copyright © 2016 Kasper Kronborg Isager. Licensed under the terms of the MIT license.