Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

colorizr

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

colorizr - npm Package Compare versions

Comparing version 2.0.0-1 to 2.0.0-2

esm/chroma.d.ts

11

esm/brightness-difference.js
import hex2rgb from './hex2rgb';
import { invariant, round, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';
/**

@@ -7,6 +8,6 @@ * Get the brightness difference between 2 colors.

export default function brightnessDifference(left, right) {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
var RGBLeft = hex2rgb(left);
var RGBRight = hex2rgb(right);
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
var RGBLeft = hex2rgb(parseCSS(left));
var RGBRight = hex2rgb(parseCSS(right));
var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;

@@ -13,0 +14,0 @@ var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;

import hex2rgb from './hex2rgb';
import { invariant, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages } from './utils';
/**

@@ -7,6 +8,6 @@ * Get the difference between 2 colors.

export default function colorDifference(left, right) {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
var RGBLeft = hex2rgb(left);
var RGBRight = hex2rgb(right);
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
var RGBLeft = hex2rgb(parseCSS(left));
var RGBRight = hex2rgb(parseCSS(right));
return (Math.max(RGBLeft.r, RGBRight.r) -

@@ -13,0 +14,0 @@ Math.min(RGBLeft.r, RGBRight.r) +

import getLuminance from './luminance';
import { invariant, round, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';
/**

@@ -7,6 +8,6 @@ * Get the color contrast between 2 colors.

export default function contrast(left, right) {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
var LuminanceLeft = getLuminance(left);
var LuminanceRight = getLuminance(right);
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
var LuminanceLeft = getLuminance(parseCSS(left));
var LuminanceRight = getLuminance(parseCSS(right));
var output;

@@ -19,4 +20,4 @@ if (LuminanceLeft >= LuminanceRight) {

}
return round(output, 2);
return round(output);
}
//# sourceMappingURL=contrast.js.map
import rgb2Hsl from './rgb2hsl';
import { isRGB, isHSL, isNumber, isPlainObject, invariant } from './utils';
import { isRGB, isHSL, isNumber, isPlainObject, invariant, messages } from './utils';
import hsl2rgb from './hsl2rgb';
export default function formatCSS(input, options) {
if (options === void 0) { options = {}; }
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), 'invalid input');
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), messages.invalid);
var alpha = options.alpha, _a = options.model, model = _a === void 0 ? isRGB(input) ? 'rgb' : 'hsl' : _a;

@@ -8,0 +8,0 @@ var prefix = "" + model + (isNumber(alpha) ? 'a' : '');

@@ -1,5 +0,5 @@

import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';
import isValidHex from './is-valid-hex';
export default function formatHex(input) {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
var color = input.replace('#', '');

@@ -6,0 +6,0 @@ var hex = color;

import hex2rgb from './hex2rgb';
import rgb2hsl from './rgb2hsl';
import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';
export default function hex2hsl(input) {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
return rgb2hsl(hex2rgb(input));
}
//# sourceMappingURL=hex2hsl.js.map
import formatHex from './format-hex';
import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';
export default function hex2rgb(input) {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
var hex = formatHex(input).substr(1);

@@ -6,0 +6,0 @@ return {

import hsl2rgb from './hsl2rgb';
import rgb2hex from './rgb2hex';
import { invariant, isHSL } from './utils';
import { invariant, isHSL, messages } from './utils';
/**

@@ -8,8 +8,5 @@ * Convert a HSL object to HEX.

export default function hsl2hex(input) {
invariant(!input, 'input is required');
if (!isHSL(input)) {
invariant(true, 'invalid input');
}
invariant(!isHSL(input), messages.invalid);
return rgb2hex(hsl2rgb(input));
}
//# sourceMappingURL=hsl2hex.js.map
import hue2rgb from './hue2rgb';
import { invariant, isHSL, round } from './utils';
import { invariant, isHSL, messages, round } from './utils';
/**

@@ -7,3 +7,3 @@ * Convert a HSL object to RGB.

export default function hsl2rgb(input) {
invariant(!input, 'input is required');
invariant(!input, messages.inputString);
invariant(!isHSL(input), 'invalid input');

@@ -10,0 +10,0 @@ var h = round(input.h) / 360;

@@ -0,6 +1,12 @@

import chroma from './chroma';
import compare from './compare';
import darken from './darken';
import desaturate from './desaturate';
import fade from './fade';
import formatCSS from './format-css';
import lighten from './lighten';
import luminance from './luminance';
import shift from './shift';
import rotate from './rotate';
import saturate from './saturate';
import textColor from './text-color';
import wcagAnalysis from './wcag';
import { Analysis, HSL, Options, RGB, RGBArray } from './types';

@@ -14,49 +20,36 @@ declare class Colorizr {

/**
* Get css string.
*
* @type {number}
* Get css string
*/
get css(): string;
/**
* Get red value.
*
* @type {number}
* Get the red value
*/
get red(): number;
/**
* Get green value.
*
* @type {number}
* Get the green value
*/
get green(): number;
/**
* Get blue value.
*
* @type {number}
* Get the blue value
*/
get blue(): number;
/**
* Get hue value.
*
* @type {number}
* Get the hue value
*/
get hue(): number;
/**
* Get saturation value,
*
* @type {number}
* Get the saturation value
*/
get saturation(): number;
/**
* Get lightness value.
*
* @type {number}
* Get the lightness value
*/
get lightness(): number;
/**
* Get luminance value.
*
* @type {number}
* Get the luminance value
*/
get luminance(): number;
/**
* Get the chroma value
*/
get chroma(): number;

@@ -68,19 +61,19 @@ /**

/**
* Test 2 colors for compliance.
* Test 2 colors for compliance
*/
compareTo(input: string): Analysis;
compare(input: string): Analysis;
/**
* Increase lightness.
* Increase lightness
*/
lighten(percentage?: number): string;
/**
* Decrease lightness.
* Decrease lightness
*/
darken(percentage?: number): string;
/**
* Increase saturation.
* Increase saturation
*/
saturate(percentage?: number): string;
/**
* Decrease saturation.
* Decrease saturation
*/

@@ -93,7 +86,11 @@ desaturate(percentage?: number): string;

/**
* Fade color.
* Rotate color
*/
rotate(degrees?: number): string;
/**
* Fade color
*/
fade(percentage?: number): string;
}
export { formatCSS, luminance, shift, textColor, wcagAnalysis };
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, };
export { default as brightnessDifference } from './brightness-difference';

@@ -103,3 +100,2 @@ export { default as colorDifference } from './color-difference';

export { default as formatHex } from './format-hex';
export { default as harmony } from './harmony';
export { default as hex2hsl } from './hex2hsl';

@@ -109,4 +105,5 @@ export { default as hex2rgb } from './hex2rgb';

export { default as hsl2rgb } from './hsl2rgb';
export { default as hue2rgb } from './hue2rgb';
export { default as isValidColor } from './is-valid-color';
export { default as isValidHex } from './is-valid-hex';
export { default as name } from './name';
export { default as palette } from './palette';

@@ -117,4 +114,4 @@ export { default as parseCSS } from './parse-css';

export { default as rgb2hsl } from './rgb2hsl';
export { default as rotate } from './rotate';
export { default as scheme } from './scheme';
export * from './types';
export default Colorizr;

@@ -1,8 +0,14 @@

import { constrain, constrainDegrees, invariant, isString, round } from './utils';
import { invariant } from './utils';
import chroma from './chroma';
import compare from './compare';
import darken from './darken';
import desaturate from './desaturate';
import fade from './fade';
import formatCSS from './format-css';
import lighten from './lighten';
import luminance from './luminance';
import parseColor from './parse-color';
import shift from './shift';
import rotate from './rotate';
import saturate from './saturate';
import textColor from './text-color';
import wcagAnalysis from './wcag';
var Colorizr = /** @class */ (function () {

@@ -12,3 +18,3 @@ function Colorizr(color, options) {

invariant(!color, 'color is required');
var _a = options.model, model = _a === void 0 ? 'hsl' : _a;
var _a = options.model, model = _a === void 0 ? 'rgb' : _a;
var _b = parseColor(color), hex = _b.hex, hsl = _b.hsl, rgb = _b.rgb;

@@ -22,5 +28,3 @@ this.model = model;

/**
* Get css string.
*
* @type {number}
* Get css string
*/

@@ -35,5 +39,3 @@ get: function () {

/**
* Get red value.
*
* @type {number}
* Get the red value
*/

@@ -48,5 +50,3 @@ get: function () {

/**
* Get green value.
*
* @type {number}
* Get the green value
*/

@@ -61,5 +61,3 @@ get: function () {

/**
* Get blue value.
*
* @type {number}
* Get the blue value
*/

@@ -74,5 +72,3 @@ get: function () {

/**
* Get hue value.
*
* @type {number}
* Get the hue value
*/

@@ -87,5 +83,3 @@ get: function () {

/**
* Get saturation value,
*
* @type {number}
* Get the saturation value
*/

@@ -100,5 +94,3 @@ get: function () {

/**
* Get lightness value.
*
* @type {number}
* Get the lightness value
*/

@@ -113,5 +105,3 @@ get: function () {

/**
* Get luminance value.
*
* @type {number}
* Get the luminance value
*/

@@ -125,7 +115,7 @@ get: function () {

Object.defineProperty(Colorizr.prototype, "chroma", {
/**
* Get the chroma value
*/
get: function () {
var _a = this.rgb, r = _a.r, g = _a.g, b = _a.b;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
return round((max - min) / 255, 4);
return chroma(this.hex);
},

@@ -146,43 +136,34 @@ enumerable: false,

/**
* Test 2 colors for compliance.
* Test 2 colors for compliance
*/
Colorizr.prototype.compareTo = function (input) {
invariant(!isString(input), 'input must be a string');
return wcagAnalysis(this.hex, input);
Colorizr.prototype.compare = function (input) {
return compare(this.hex, input);
};
/**
* Increase lightness.
* Increase lightness
*/
Colorizr.prototype.lighten = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift(this.hex, {
l: constrain(this.lightness, percentage, [0, 100], '+'),
});
return lighten(this.hex, percentage);
};
/**
* Decrease lightness.
* Decrease lightness
*/
Colorizr.prototype.darken = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift(this.hex, {
l: constrain(this.lightness, percentage, [0, 100], '-'),
});
return darken(this.hex, percentage);
};
/**
* Increase saturation.
* Increase saturation
*/
Colorizr.prototype.saturate = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift(this.hex, {
s: constrain(this.saturation, percentage, [0, 100], '+'),
});
return saturate(this.hex, percentage);
};
/**
* Decrease saturation.
* Decrease saturation
*/
Colorizr.prototype.desaturate = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift(this.hex, {
s: constrain(this.saturation, percentage, [0, 100], '-'),
});
return desaturate(this.hex, percentage);
};

@@ -193,20 +174,21 @@ /**

Colorizr.prototype.invert = function () {
return shift(this.hex, {
h: constrainDegrees(this.hue, 180),
});
return rotate(this.hex, 180);
};
/**
* Fade color.
* Rotate color
*/
Colorizr.prototype.rotate = function (degrees) {
if (degrees === void 0) { degrees = 15; }
return rotate(this.hex, degrees);
};
/**
* Fade color
*/
Colorizr.prototype.fade = function (percentage) {
if (percentage === void 0) { percentage = 10; }
var amount = (100 - percentage) / 100;
if (this.model === 'rgb') {
return "rgba(" + this.rgb.r + ", " + this.rgb.g + ", " + this.rgb.b + ", " + amount + ")";
}
return "hsla(" + this.hsl.h + ", " + this.hsl.s + "%, " + this.hsl.l + "%, " + amount + ")";
return fade(this.hex, percentage, this.model);
};
return Colorizr;
}());
export { formatCSS, luminance, shift, textColor, wcagAnalysis };
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, };
export { default as brightnessDifference } from './brightness-difference';

@@ -216,3 +198,2 @@ export { default as colorDifference } from './color-difference';

export { default as formatHex } from './format-hex';
export { default as harmony } from './harmony';
export { default as hex2hsl } from './hex2hsl';

@@ -222,4 +203,5 @@ export { default as hex2rgb } from './hex2rgb';

export { default as hsl2rgb } from './hsl2rgb';
export { default as hue2rgb } from './hue2rgb';
export { default as isValidColor } from './is-valid-color';
export { default as isValidHex } from './is-valid-hex';
export { default as name } from './name';
export { default as palette } from './palette';

@@ -230,5 +212,5 @@ export { default as parseCSS } from './parse-css';

export { default as rgb2hsl } from './rgb2hsl';
export { default as rotate } from './rotate';
export { default as scheme } from './scheme';
export * from './types';
export default Colorizr;
//# sourceMappingURL=index.js.map
import hex2rgb from './hex2rgb';
import { invariant, isString, round } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';
/**

@@ -7,4 +8,4 @@ * Get the luminance of a color.

export default function luminance(input) {
invariant(!isString(input), 'input must be a string');
var _a = hex2rgb(input), r = _a.r, g = _a.g, b = _a.b;
invariant(!isString(input), messages.inputString);
var _a = hex2rgb(parseCSS(input)), r = _a.r, g = _a.g, b = _a.b;
var rgb = [r / 255, g / 255, b / 255];

@@ -11,0 +12,0 @@ for (var i = 0; i < rgb.length; i++) {

@@ -14,8 +14,11 @@ var __assign = (this && this.__assign) || function () {

import hsl2hex from './hsl2hex';
import parseCSS from './parse-css';
import rotate from './rotate';
import { invariant, isString } from './utils';
import { invariant, isPlainObject, isString, messages } from './utils';
export default function palette(input, options) {
invariant(!isString(input), 'input must be a string');
var _a = options || {}, lightness = _a.lightness, saturation = _a.saturation, _b = _a.size, size = _b === void 0 ? 6 : _b, type = _a.type;
var hsl = hex2hsl(input);
if (options === void 0) { options = {}; }
invariant(!isString(input), messages.inputString);
invariant(!isPlainObject(options), messages.options);
var lightness = options.lightness, saturation = options.saturation, _a = options.size, size = _a === void 0 ? 6 : _a, type = options.type;
var hsl = hex2hsl(parseCSS(input));
var output = [];

@@ -22,0 +25,0 @@ switch (type) {

@@ -9,5 +9,5 @@ import hex2hsl from './hex2hsl';

import rgb2hsl from './rgb2hsl';
import { invariant, isHSL, isPlainObject, isRGB, isString, limit } from './utils';
import { invariant, isHSL, isPlainObject, isRGB, isString, limit, messages } from './utils';
export default function parseColor(color) {
invariant(!color, 'input is required');
invariant(!color, messages.input);
var output = {};

@@ -53,3 +53,3 @@ if (isString(color)) {

else {
throw new Error('invalid input type');
throw new Error(messages.input);
}

@@ -56,0 +56,0 @@ return output;

@@ -1,5 +0,5 @@

import { ColorTypes, HSL, RGB } from './types';
import { ColorTypes, Return } from './types';
/**
* Parse CSS attribute.
* Parse CSS color
*/
export default function parseCSS(input: string, output?: ColorTypes): string | HSL | RGB;
export default function parseCSS<T extends ColorTypes = 'hex'>(input: string, output?: T): Return<T>;

@@ -7,56 +7,71 @@ import hex2hsl from './hex2hsl';

import rgb2hsl from './rgb2hsl';
import { invariant, isString } from './utils';
import { cssColors, invariant, isString, messages } from './utils';
import isValidHex from './is-valid-hex';
/**
* Parse CSS attribute.
* Parse CSS color
*/
export default function parseCSS(input, output) {
if (output === void 0) { output = 'hex'; }
invariant(!isString(input), 'input must be a string');
if (isValidHex(input)) {
if (output === 'hsl') {
return hex2hsl(input);
invariant(!isString(input), messages.inputString);
var result;
var parsedInput = cssColors[input.toLowerCase()] || input;
if (isValidHex(parsedInput)) {
switch (output) {
case 'hsl': {
result = hex2hsl(parsedInput);
break;
}
case 'rgb': {
result = hex2rgb(parsedInput);
break;
}
default: {
result = parsedInput;
break;
}
}
if (output === 'rgb') {
return hex2rgb(input);
}
return input;
}
var matches = input.match(/(hsl|rgb)a?\((\d+),?\s*?(\d+)%?,?\s*?(\d+)%?[^)]*\)/i);
invariant(!matches || matches.length !== 5, 'invalid CSS string');
var _a = matches || [], model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4];
var hex;
var hsl;
var rgb;
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex(hsl);
rgb = hsl2rgb(hsl);
}
else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex(rgb);
hsl = rgb2hsl(rgb);
}
switch (output) {
case 'hsl': {
return hsl;
// TODO: improve the pattern to require 3 groups
var matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i);
invariant(!matches || matches.length !== 5, 'invalid CSS string');
var _a = matches, model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4];
var hex = void 0;
var hsl = void 0;
var rgb = void 0;
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex(hsl);
rgb = hsl2rgb(hsl);
}
case 'rgb': {
return rgb;
else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex(rgb);
hsl = rgb2hsl(rgb);
}
case 'hex':
default: {
return hex;
switch (output) {
case 'hsl': {
result = hsl;
break;
}
case 'rgb': {
result = rgb;
break;
}
case 'hex':
default: {
result = hex;
break;
}
}
}
return result;
}
//# sourceMappingURL=parse-css.js.map

@@ -1,2 +0,2 @@

import { invariant, isRGBArray } from './utils';
import { invariant, isRGB, isRGBArray, messages } from './utils';
/**

@@ -6,3 +6,4 @@ * Convert a RGA object to hex.

export default function rgb2hex(input) {
invariant(!input, 'input is required');
invariant(!input, messages.input);
invariant(!isRGBArray(input) && !isRGB(input), messages.invalid);
var r;

@@ -17,7 +18,5 @@ var g;

}
invariant(!isRGBArray([r, g, b]), 'invalid input');
// eslint-disable-next-line no-bitwise
var hex = (1 << 24) + (r << 16) + (g << 8) + b;
return "#" + hex.toString(16).slice(1);
var output = [r.toString(16), g.toString(16), b.toString(16)];
return "#" + output.map(function (d) { return (d.length === 1 ? "0" + d : d); }).join('');
}
//# sourceMappingURL=rgb2hex.js.map

@@ -1,4 +0,4 @@

import { invariant, isRGB, limit } from './utils';
import { invariant, isRGB, limit, messages } from './utils';
export default function rgb2hsl(input) {
invariant(!input, 'input is required');
invariant(!input, messages.input);
var rgb = input;

@@ -8,3 +8,3 @@ if (Array.isArray(input)) {

}
invariant(!isRGB(rgb), 'invalid input');
invariant(!isRGB(rgb), messages.invalid);
var rLimit = limit(rgb.r, 'r') / 255;

@@ -11,0 +11,0 @@ var gLimit = limit(rgb.g, 'g') / 255;

@@ -0,1 +1,4 @@

/**
* Change the color hue
*/
export default function rotate(input: string, degrees?: number): string;
import hex2hsl from './hex2hsl';
import shift from './shift';
import { constrainDegrees, invariant, isString } from './utils';
import parseCSS from './parse-css';
import { shift } from './shift';
import { constrainDegrees, invariant, isNumber, isString, messages } from './utils';
/**
* Change the color hue
*/
export default function rotate(input, degrees) {
if (degrees === void 0) { degrees = 15; }
invariant(!isString(input), 'input must be a string');
var hsl = hex2hsl(input);
return shift(input, {
h: constrainDegrees(hsl.h, degrees),
invariant(!isString(input), messages.inputString);
invariant(!isNumber(degrees), 'degrees must be a number');
var hex = parseCSS(input);
var h = hex2hsl(hex).h;
return shift(hex, {
h: constrainDegrees(h, degrees),
});
}
//# sourceMappingURL=rotate.js.map
import { HSL, RGB } from './types';
export default function shift(input: string, options: Partial<HSL | RGB>): string;
/**
* Shift color properties
*/
export declare function shift(input: string, options: Partial<HSL | RGB>): string;

@@ -12,12 +12,14 @@ var __assign = (this && this.__assign) || function () {

};
import hsl2hex from './hsl2hex';
import hex2hsl from './hex2hsl';
import hsl2hex from './hsl2hex';
import { HSLKeys, invariant, isPlainObject, isString, pick } from './utils';
export default function shift(input, options) {
invariant(!isString(input), 'input must be a string');
if (!isPlainObject(options)) {
return input;
}
return hsl2hex(__assign(__assign({}, hex2hsl(input)), pick(options, HSLKeys)));
import parseCSS from './parse-css';
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './utils';
/**
* Shift color properties
*/
export function shift(input, options) {
invariant(!isString(input), messages.inputString);
invariant(!isPlainObject(options), messages.options);
return hsl2hex(__assign(__assign({}, hex2hsl(parseCSS(input))), pick(options, HSLKeys)));
}
//# sourceMappingURL=shift.js.map
import hex2rgb from './hex2rgb';
import { invariant, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages } from './utils';
/**

@@ -7,7 +8,7 @@ * Get the contrasted color for a given hex.

export default function textColor(input) {
invariant(!isString(input), 'input must be a string');
var _a = hex2rgb(input), r = _a.r, g = _a.g, b = _a.b;
invariant(!isString(input), messages.inputString);
var _a = hex2rgb(parseCSS(input)), r = _a.r, g = _a.g, b = _a.b;
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
return yiq >= 128 ? '#000000' : '#ffffff';
}
//# sourceMappingURL=text-color.js.map

@@ -22,3 +22,2 @@ export interface Analysis {

}
export declare type Harmony = 'analogous' | 'complementary' | 'rectangle' | 'split' | 'split-complementary' | 'square' | 'tetradic' | 'triadic';
export interface HSL {

@@ -39,2 +38,4 @@ h: number;

export declare type PlainObject = Record<string, any>;
declare type ReturnModel<T> = T extends 'rgb' ? RGB : HSL;
export declare type Return<T> = T extends 'rgb' | 'hsl' ? ReturnModel<T> : string;
export interface RGB {

@@ -46,1 +47,3 @@ r: number;

export declare type RGBArray = [number, number, number];
export declare type Scheme = 'analogous' | 'complementary' | 'rectangle' | 'split' | 'split-complementary' | 'square' | 'tetradic' | 'triadic';
export {};

@@ -13,12 +13,164 @@ import { HSL, RGB, PlainObject, RGBArray } from './types';

/**
* Parse math string expressions.
* CSS named colors
*/
export declare const cssColors: {
aliceblue: string;
antiquewhite: string;
aqua: string;
aquamarine: string;
azure: string;
beige: string;
bisque: string;
black: string;
blanchedalmond: string;
blue: string;
blueviolet: string;
brown: string;
burlywood: string;
cadetblue: string;
chartreuse: string;
chocolate: string;
coral: string;
cornflowerblue: string;
cornsilk: string;
crimson: string;
cyan: string;
darkblue: string;
darkcyan: string;
darkgoldenrod: string;
darkgray: string;
darkgrey: string;
darkgreen: string;
darkkhaki: string;
darkmagenta: string;
darkolivegreen: string;
darkorange: string;
darkorchid: string;
darkred: string;
darksalmon: string;
darkseagreen: string;
darkslateblue: string;
darkslategray: string;
darkslategrey: string;
darkturquoise: string;
darkviolet: string;
deeppink: string;
deepskyblue: string;
dimgray: string;
dimgrey: string;
dodgerblue: string;
firebrick: string;
floralwhite: string;
forestgreen: string;
fuchsia: string;
gainsboro: string;
ghostwhite: string;
gold: string;
goldenrod: string;
gray: string;
grey: string;
green: string;
greenyellow: string;
honeydew: string;
hotpink: string;
indianred: string;
indigo: string;
ivory: string;
khaki: string;
lavender: string;
lavenderblush: string;
lawngreen: string;
lemonchiffon: string;
lightblue: string;
lightcoral: string;
lightcyan: string;
lightgoldenrodyellow: string;
lightgray: string;
lightgrey: string;
lightgreen: string;
lightpink: string;
lightsalmon: string;
lightseagreen: string;
lightskyblue: string;
lightslategray: string;
lightslategrey: string;
lightsteelblue: string;
lightyellow: string;
lime: string;
limegreen: string;
linen: string;
magenta: string;
maroon: string;
mediumaquamarine: string;
mediumblue: string;
mediumorchid: string;
mediumpurple: string;
mediumseagreen: string;
mediumslateblue: string;
mediumspringgreen: string;
mediumturquoise: string;
mediumvioletred: string;
midnightblue: string;
mintcream: string;
mistyrose: string;
moccasin: string;
navajowhite: string;
navy: string;
oldlace: string;
olive: string;
olivedrab: string;
orange: string;
orangered: string;
orchid: string;
palegoldenrod: string;
palegreen: string;
paleturquoise: string;
palevioletred: string;
papayawhip: string;
peachpuff: string;
peru: string;
pink: string;
plum: string;
powderblue: string;
purple: string;
red: string;
rosybrown: string;
royalblue: string;
saddlebrown: string;
salmon: string;
sandybrown: string;
seagreen: string;
seashell: string;
sienna: string;
silver: string;
skyblue: string;
slateblue: string;
slategray: string;
slategrey: string;
snow: string;
springgreen: string;
steelblue: string;
tan: string;
teal: string;
thistle: string;
tomato: string;
turquoise: string;
violet: string;
wheat: string;
white: string;
whitesmoke: string;
yellow: string;
yellowgreen: string;
};
/**
* Parse math string expressions
*/
export declare function expr(input: string): number;
export declare function invariant(condition: boolean, message: string, a?: any, b?: any, c?: any, d?: any, e?: any, f?: any): void;
/**
* Check if an object contains HSL values.
* Check if an object contains HSL values
*/
export declare function isHSL(input: any): input is HSL;
/**
* Check if the input is a number and no NaN
* Check if the input is a number and not NaN
*/

@@ -46,2 +198,11 @@ export declare function isNumber(input: any): input is number;

export declare function limit(input: number, type: string): number;
export declare const messages: {
amount: string;
left: string;
right: string;
input: string;
inputString: string;
invalid: string;
options: string;
};
/**

@@ -48,0 +209,0 @@ * Creates an object composed of the picked source properties.

@@ -33,4 +33,156 @@ export var HSLKeys = ['h', 's', 'l'];

/**
* Parse math string expressions.
* CSS named colors
*/
export var cssColors = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgrey: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
grey: '#808080',
green: '#008000',
greenyellow: '#adff2f',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#FAFAD2',
lightgray: '#d3d3d3',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32',
};
/**
* Parse math string expressions
*/
export function expr(input) {

@@ -98,3 +250,3 @@ var chars = input.split('');

error = new Error(message.replace(/%s/g, function () { return args_1[argIndex_1++]; }));
error.name = 'Colorizr';
error.name = 'colorizr';
}

@@ -105,3 +257,3 @@ throw error;

/**
* Check if an object contains HSL values.
* Check if an object contains HSL values
*/

@@ -120,3 +272,3 @@ export function isHSL(input) {

/**
* Check if the input is a number and no NaN
* Check if the input is a number and not NaN
*/

@@ -181,2 +333,11 @@ export function isNumber(input) {

}
export var messages = {
amount: 'amount must be a number',
left: 'left is required and must be a string',
right: 'right is required and must be a string',
input: 'input is required',
inputString: 'input is required and must be a string',
invalid: 'invalid input',
options: 'invalid options',
};
/**

@@ -183,0 +344,0 @@ * Creates an object composed of the picked source properties.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hex2rgb_1 = require("./hex2rgb");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");

@@ -9,6 +10,6 @@ /**

function brightnessDifference(left, right) {
utils_1.invariant(!utils_1.isString(left), 'left is required');
utils_1.invariant(!utils_1.isString(right), 'right is required');
var RGBLeft = hex2rgb_1.default(left);
var RGBRight = hex2rgb_1.default(right);
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left);
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right);
var RGBLeft = hex2rgb_1.default(parse_css_1.default(left));
var RGBRight = hex2rgb_1.default(parse_css_1.default(right));
var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;

@@ -15,0 +16,0 @@ var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hex2rgb_1 = require("./hex2rgb");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");

@@ -9,6 +10,6 @@ /**

function colorDifference(left, right) {
utils_1.invariant(!utils_1.isString(left), 'left is required');
utils_1.invariant(!utils_1.isString(right), 'right is required');
var RGBLeft = hex2rgb_1.default(left);
var RGBRight = hex2rgb_1.default(right);
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left);
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right);
var RGBLeft = hex2rgb_1.default(parse_css_1.default(left));
var RGBRight = hex2rgb_1.default(parse_css_1.default(right));
return (Math.max(RGBLeft.r, RGBRight.r) -

@@ -15,0 +16,0 @@ Math.min(RGBLeft.r, RGBRight.r) +

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var luminance_1 = require("./luminance");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");

@@ -9,6 +10,6 @@ /**

function contrast(left, right) {
utils_1.invariant(!utils_1.isString(left), 'left is required');
utils_1.invariant(!utils_1.isString(right), 'right is required');
var LuminanceLeft = luminance_1.default(left);
var LuminanceRight = luminance_1.default(right);
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left);
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right);
var LuminanceLeft = luminance_1.default(parse_css_1.default(left));
var LuminanceRight = luminance_1.default(parse_css_1.default(right));
var output;

@@ -21,5 +22,5 @@ if (LuminanceLeft >= LuminanceRight) {

}
return utils_1.round(output, 2);
return utils_1.round(output);
}
exports.default = contrast;
//# sourceMappingURL=contrast.js.map

@@ -8,3 +8,3 @@ "use strict";

if (options === void 0) { options = {}; }
utils_1.invariant(!utils_1.isPlainObject(input) || (!utils_1.isRGB(input) && !utils_1.isHSL(input)), 'invalid input');
utils_1.invariant(!utils_1.isPlainObject(input) || (!utils_1.isRGB(input) && !utils_1.isHSL(input)), utils_1.messages.invalid);
var alpha = options.alpha, _a = options.model, model = _a === void 0 ? utils_1.isRGB(input) ? 'rgb' : 'hsl' : _a;

@@ -11,0 +11,0 @@ var prefix = "" + model + (utils_1.isNumber(alpha) ? 'a' : '');

@@ -6,3 +6,3 @@ "use strict";

function formatHex(input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
var color = input.replace('#', '');

@@ -9,0 +9,0 @@ var hex = color;

@@ -7,3 +7,3 @@ "use strict";

function hex2hsl(input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
return rgb2hsl_1.default(hex2rgb_1.default(input));

@@ -10,0 +10,0 @@ }

@@ -6,3 +6,3 @@ "use strict";

function hex2rgb(input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
var hex = format_hex_1.default(input).substr(1);

@@ -9,0 +9,0 @@ return {

@@ -10,6 +10,3 @@ "use strict";

function hsl2hex(input) {
utils_1.invariant(!input, 'input is required');
if (!utils_1.isHSL(input)) {
utils_1.invariant(true, 'invalid input');
}
utils_1.invariant(!utils_1.isHSL(input), utils_1.messages.invalid);
return rgb2hex_1.default(hsl2rgb_1.default(input));

@@ -16,0 +13,0 @@ }

@@ -9,3 +9,3 @@ "use strict";

function hsl2rgb(input) {
utils_1.invariant(!input, 'input is required');
utils_1.invariant(!input, utils_1.messages.inputString);
utils_1.invariant(!utils_1.isHSL(input), 'invalid input');

@@ -12,0 +12,0 @@ var h = utils_1.round(input.h) / 360;

@@ -0,6 +1,12 @@

import chroma from './chroma';
import compare from './compare';
import darken from './darken';
import desaturate from './desaturate';
import fade from './fade';
import formatCSS from './format-css';
import lighten from './lighten';
import luminance from './luminance';
import shift from './shift';
import rotate from './rotate';
import saturate from './saturate';
import textColor from './text-color';
import wcagAnalysis from './wcag';
import { Analysis, HSL, Options, RGB, RGBArray } from './types';

@@ -14,49 +20,36 @@ declare class Colorizr {

/**
* Get css string.
*
* @type {number}
* Get css string
*/
get css(): string;
/**
* Get red value.
*
* @type {number}
* Get the red value
*/
get red(): number;
/**
* Get green value.
*
* @type {number}
* Get the green value
*/
get green(): number;
/**
* Get blue value.
*
* @type {number}
* Get the blue value
*/
get blue(): number;
/**
* Get hue value.
*
* @type {number}
* Get the hue value
*/
get hue(): number;
/**
* Get saturation value,
*
* @type {number}
* Get the saturation value
*/
get saturation(): number;
/**
* Get lightness value.
*
* @type {number}
* Get the lightness value
*/
get lightness(): number;
/**
* Get luminance value.
*
* @type {number}
* Get the luminance value
*/
get luminance(): number;
/**
* Get the chroma value
*/
get chroma(): number;

@@ -68,19 +61,19 @@ /**

/**
* Test 2 colors for compliance.
* Test 2 colors for compliance
*/
compareTo(input: string): Analysis;
compare(input: string): Analysis;
/**
* Increase lightness.
* Increase lightness
*/
lighten(percentage?: number): string;
/**
* Decrease lightness.
* Decrease lightness
*/
darken(percentage?: number): string;
/**
* Increase saturation.
* Increase saturation
*/
saturate(percentage?: number): string;
/**
* Decrease saturation.
* Decrease saturation
*/

@@ -93,7 +86,11 @@ desaturate(percentage?: number): string;

/**
* Fade color.
* Rotate color
*/
rotate(degrees?: number): string;
/**
* Fade color
*/
fade(percentage?: number): string;
}
export { formatCSS, luminance, shift, textColor, wcagAnalysis };
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, };
export { default as brightnessDifference } from './brightness-difference';

@@ -103,3 +100,2 @@ export { default as colorDifference } from './color-difference';

export { default as formatHex } from './format-hex';
export { default as harmony } from './harmony';
export { default as hex2hsl } from './hex2hsl';

@@ -109,4 +105,5 @@ export { default as hex2rgb } from './hex2rgb';

export { default as hsl2rgb } from './hsl2rgb';
export { default as hue2rgb } from './hue2rgb';
export { default as isValidColor } from './is-valid-color';
export { default as isValidHex } from './is-valid-hex';
export { default as name } from './name';
export { default as palette } from './palette';

@@ -117,4 +114,4 @@ export { default as parseCSS } from './parse-css';

export { default as rgb2hsl } from './rgb2hsl';
export { default as rotate } from './rotate';
export { default as scheme } from './scheme';
export * from './types';
export default Colorizr;

@@ -13,15 +13,27 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.rotate = exports.rgb2hsl = exports.rgb2hex = exports.random = exports.parseCSS = exports.palette = exports.isValidHex = exports.hue2rgb = exports.hsl2rgb = exports.hsl2hex = exports.hex2rgb = exports.hex2hsl = exports.harmony = exports.formatHex = exports.contrast = exports.colorDifference = exports.brightnessDifference = exports.wcagAnalysis = exports.textColor = exports.shift = exports.luminance = exports.formatCSS = void 0;
exports.scheme = exports.rgb2hsl = exports.rgb2hex = exports.random = exports.parseCSS = exports.palette = exports.name = exports.isValidHex = exports.isValidColor = exports.hsl2rgb = exports.hsl2hex = exports.hex2rgb = exports.hex2hsl = exports.formatHex = exports.contrast = exports.colorDifference = exports.brightnessDifference = exports.textColor = exports.saturate = exports.rotate = exports.luminance = exports.lighten = exports.formatCSS = exports.fade = exports.desaturate = exports.darken = exports.compare = exports.chroma = void 0;
var utils_1 = require("./utils");
var chroma_1 = require("./chroma");
exports.chroma = chroma_1.default;
var compare_1 = require("./compare");
exports.compare = compare_1.default;
var darken_1 = require("./darken");
exports.darken = darken_1.default;
var desaturate_1 = require("./desaturate");
exports.desaturate = desaturate_1.default;
var fade_1 = require("./fade");
exports.fade = fade_1.default;
var format_css_1 = require("./format-css");
exports.formatCSS = format_css_1.default;
var lighten_1 = require("./lighten");
exports.lighten = lighten_1.default;
var luminance_1 = require("./luminance");
exports.luminance = luminance_1.default;
var parse_color_1 = require("./parse-color");
var shift_1 = require("./shift");
exports.shift = shift_1.default;
var rotate_1 = require("./rotate");
exports.rotate = rotate_1.default;
var saturate_1 = require("./saturate");
exports.saturate = saturate_1.default;
var text_color_1 = require("./text-color");
exports.textColor = text_color_1.default;
var wcag_1 = require("./wcag");
exports.wcagAnalysis = wcag_1.default;
var Colorizr = /** @class */ (function () {

@@ -31,3 +43,3 @@ function Colorizr(color, options) {

utils_1.invariant(!color, 'color is required');
var _a = options.model, model = _a === void 0 ? 'hsl' : _a;
var _a = options.model, model = _a === void 0 ? 'rgb' : _a;
var _b = parse_color_1.default(color), hex = _b.hex, hsl = _b.hsl, rgb = _b.rgb;

@@ -41,5 +53,3 @@ this.model = model;

/**
* Get css string.
*
* @type {number}
* Get css string
*/

@@ -54,5 +64,3 @@ get: function () {

/**
* Get red value.
*
* @type {number}
* Get the red value
*/

@@ -67,5 +75,3 @@ get: function () {

/**
* Get green value.
*
* @type {number}
* Get the green value
*/

@@ -80,5 +86,3 @@ get: function () {

/**
* Get blue value.
*
* @type {number}
* Get the blue value
*/

@@ -93,5 +97,3 @@ get: function () {

/**
* Get hue value.
*
* @type {number}
* Get the hue value
*/

@@ -106,5 +108,3 @@ get: function () {

/**
* Get saturation value,
*
* @type {number}
* Get the saturation value
*/

@@ -119,5 +119,3 @@ get: function () {

/**
* Get lightness value.
*
* @type {number}
* Get the lightness value
*/

@@ -132,5 +130,3 @@ get: function () {

/**
* Get luminance value.
*
* @type {number}
* Get the luminance value
*/

@@ -144,7 +140,7 @@ get: function () {

Object.defineProperty(Colorizr.prototype, "chroma", {
/**
* Get the chroma value
*/
get: function () {
var _a = this.rgb, r = _a.r, g = _a.g, b = _a.b;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
return utils_1.round((max - min) / 255, 4);
return chroma_1.default(this.hex);
},

@@ -165,43 +161,34 @@ enumerable: false,

/**
* Test 2 colors for compliance.
* Test 2 colors for compliance
*/
Colorizr.prototype.compareTo = function (input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
return wcag_1.default(this.hex, input);
Colorizr.prototype.compare = function (input) {
return compare_1.default(this.hex, input);
};
/**
* Increase lightness.
* Increase lightness
*/
Colorizr.prototype.lighten = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift_1.default(this.hex, {
l: utils_1.constrain(this.lightness, percentage, [0, 100], '+'),
});
return lighten_1.default(this.hex, percentage);
};
/**
* Decrease lightness.
* Decrease lightness
*/
Colorizr.prototype.darken = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift_1.default(this.hex, {
l: utils_1.constrain(this.lightness, percentage, [0, 100], '-'),
});
return darken_1.default(this.hex, percentage);
};
/**
* Increase saturation.
* Increase saturation
*/
Colorizr.prototype.saturate = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift_1.default(this.hex, {
s: utils_1.constrain(this.saturation, percentage, [0, 100], '+'),
});
return saturate_1.default(this.hex, percentage);
};
/**
* Decrease saturation.
* Decrease saturation
*/
Colorizr.prototype.desaturate = function (percentage) {
if (percentage === void 0) { percentage = 10; }
return shift_1.default(this.hex, {
s: utils_1.constrain(this.saturation, percentage, [0, 100], '-'),
});
return desaturate_1.default(this.hex, percentage);
};

@@ -212,16 +199,17 @@ /**

Colorizr.prototype.invert = function () {
return shift_1.default(this.hex, {
h: utils_1.constrainDegrees(this.hue, 180),
});
return rotate_1.default(this.hex, 180);
};
/**
* Fade color.
* Rotate color
*/
Colorizr.prototype.rotate = function (degrees) {
if (degrees === void 0) { degrees = 15; }
return rotate_1.default(this.hex, degrees);
};
/**
* Fade color
*/
Colorizr.prototype.fade = function (percentage) {
if (percentage === void 0) { percentage = 10; }
var amount = (100 - percentage) / 100;
if (this.model === 'rgb') {
return "rgba(" + this.rgb.r + ", " + this.rgb.g + ", " + this.rgb.b + ", " + amount + ")";
}
return "hsla(" + this.hsl.h + ", " + this.hsl.s + "%, " + this.hsl.l + "%, " + amount + ")";
return fade_1.default(this.hex, percentage, this.model);
};

@@ -238,4 +226,2 @@ return Colorizr;

Object.defineProperty(exports, "formatHex", { enumerable: true, get: function () { return format_hex_1.default; } });
var harmony_1 = require("./harmony");
Object.defineProperty(exports, "harmony", { enumerable: true, get: function () { return harmony_1.default; } });
var hex2hsl_1 = require("./hex2hsl");

@@ -249,6 +235,8 @@ Object.defineProperty(exports, "hex2hsl", { enumerable: true, get: function () { return hex2hsl_1.default; } });

Object.defineProperty(exports, "hsl2rgb", { enumerable: true, get: function () { return hsl2rgb_1.default; } });
var hue2rgb_1 = require("./hue2rgb");
Object.defineProperty(exports, "hue2rgb", { enumerable: true, get: function () { return hue2rgb_1.default; } });
var is_valid_color_1 = require("./is-valid-color");
Object.defineProperty(exports, "isValidColor", { enumerable: true, get: function () { return is_valid_color_1.default; } });
var is_valid_hex_1 = require("./is-valid-hex");
Object.defineProperty(exports, "isValidHex", { enumerable: true, get: function () { return is_valid_hex_1.default; } });
var name_1 = require("./name");
Object.defineProperty(exports, "name", { enumerable: true, get: function () { return name_1.default; } });
var palette_1 = require("./palette");

@@ -264,6 +252,6 @@ Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.default; } });

Object.defineProperty(exports, "rgb2hsl", { enumerable: true, get: function () { return rgb2hsl_1.default; } });
var rotate_1 = require("./rotate");
Object.defineProperty(exports, "rotate", { enumerable: true, get: function () { return rotate_1.default; } });
var scheme_1 = require("./scheme");
Object.defineProperty(exports, "scheme", { enumerable: true, get: function () { return scheme_1.default; } });
__exportStar(require("./types"), exports);
exports.default = Colorizr;
//# sourceMappingURL=index.js.map
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hex2rgb_1 = require("./hex2rgb");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");

@@ -9,4 +10,4 @@ /**

function luminance(input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
var _a = hex2rgb_1.default(input), r = _a.r, g = _a.g, b = _a.b;
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
var _a = hex2rgb_1.default(parse_css_1.default(input)), r = _a.r, g = _a.g, b = _a.b;
var rgb = [r / 255, g / 255, b / 255];

@@ -13,0 +14,0 @@ for (var i = 0; i < rgb.length; i++) {

@@ -16,8 +16,11 @@ "use strict";

var hsl2hex_1 = require("./hsl2hex");
var parse_css_1 = require("./parse-css");
var rotate_1 = require("./rotate");
var utils_1 = require("./utils");
function palette(input, options) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
var _a = options || {}, lightness = _a.lightness, saturation = _a.saturation, _b = _a.size, size = _b === void 0 ? 6 : _b, type = _a.type;
var hsl = hex2hsl_1.default(input);
if (options === void 0) { options = {}; }
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
utils_1.invariant(!utils_1.isPlainObject(options), utils_1.messages.options);
var lightness = options.lightness, saturation = options.saturation, _a = options.size, size = _a === void 0 ? 6 : _a, type = options.type;
var hsl = hex2hsl_1.default(parse_css_1.default(input));
var output = [];

@@ -24,0 +27,0 @@ switch (type) {

@@ -13,3 +13,3 @@ "use strict";

function parseColor(color) {
utils_1.invariant(!color, 'input is required');
utils_1.invariant(!color, utils_1.messages.input);
var output = {};

@@ -55,3 +55,3 @@ if (utils_1.isString(color)) {

else {
throw new Error('invalid input type');
throw new Error(utils_1.messages.input);
}

@@ -58,0 +58,0 @@ return output;

@@ -1,5 +0,5 @@

import { ColorTypes, HSL, RGB } from './types';
import { ColorTypes, Return } from './types';
/**
* Parse CSS attribute.
* Parse CSS color
*/
export default function parseCSS(input: string, output?: ColorTypes): string | HSL | RGB;
export default function parseCSS<T extends ColorTypes = 'hex'>(input: string, output?: T): Return<T>;

@@ -12,54 +12,69 @@ "use strict";

/**
* Parse CSS attribute.
* Parse CSS color
*/
function parseCSS(input, output) {
if (output === void 0) { output = 'hex'; }
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
if (is_valid_hex_1.default(input)) {
if (output === 'hsl') {
return hex2hsl_1.default(input);
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
var result;
var parsedInput = utils_1.cssColors[input.toLowerCase()] || input;
if (is_valid_hex_1.default(parsedInput)) {
switch (output) {
case 'hsl': {
result = hex2hsl_1.default(parsedInput);
break;
}
case 'rgb': {
result = hex2rgb_1.default(parsedInput);
break;
}
default: {
result = parsedInput;
break;
}
}
if (output === 'rgb') {
return hex2rgb_1.default(input);
}
return input;
}
var matches = input.match(/(hsl|rgb)a?\((\d+),?\s*?(\d+)%?,?\s*?(\d+)%?[^)]*\)/i);
utils_1.invariant(!matches || matches.length !== 5, 'invalid CSS string');
var _a = matches || [], model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4];
var hex;
var hsl;
var rgb;
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex_1.default(hsl);
rgb = hsl2rgb_1.default(hsl);
}
else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex_1.default(rgb);
hsl = rgb2hsl_1.default(rgb);
}
switch (output) {
case 'hsl': {
return hsl;
// TODO: improve the pattern to require 3 groups
var matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i);
utils_1.invariant(!matches || matches.length !== 5, 'invalid CSS string');
var _a = matches, model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4];
var hex = void 0;
var hsl = void 0;
var rgb = void 0;
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex_1.default(hsl);
rgb = hsl2rgb_1.default(hsl);
}
case 'rgb': {
return rgb;
else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex_1.default(rgb);
hsl = rgb2hsl_1.default(rgb);
}
case 'hex':
default: {
return hex;
switch (output) {
case 'hsl': {
result = hsl;
break;
}
case 'rgb': {
result = rgb;
break;
}
case 'hex':
default: {
result = hex;
break;
}
}
}
return result;
}
exports.default = parseCSS;
//# sourceMappingURL=parse-css.js.map

@@ -8,3 +8,4 @@ "use strict";

function rgb2hex(input) {
utils_1.invariant(!input, 'input is required');
utils_1.invariant(!input, utils_1.messages.input);
utils_1.invariant(!utils_1.isRGBArray(input) && !utils_1.isRGB(input), utils_1.messages.invalid);
var r;

@@ -19,8 +20,6 @@ var g;

}
utils_1.invariant(!utils_1.isRGBArray([r, g, b]), 'invalid input');
// eslint-disable-next-line no-bitwise
var hex = (1 << 24) + (r << 16) + (g << 8) + b;
return "#" + hex.toString(16).slice(1);
var output = [r.toString(16), g.toString(16), b.toString(16)];
return "#" + output.map(function (d) { return (d.length === 1 ? "0" + d : d); }).join('');
}
exports.default = rgb2hex;
//# sourceMappingURL=rgb2hex.js.map

@@ -5,3 +5,3 @@ "use strict";

function rgb2hsl(input) {
utils_1.invariant(!input, 'input is required');
utils_1.invariant(!input, utils_1.messages.input);
var rgb = input;

@@ -11,3 +11,3 @@ if (Array.isArray(input)) {

}
utils_1.invariant(!utils_1.isRGB(rgb), 'invalid input');
utils_1.invariant(!utils_1.isRGB(rgb), utils_1.messages.invalid);
var rLimit = utils_1.limit(rgb.r, 'r') / 255;

@@ -14,0 +14,0 @@ var gLimit = utils_1.limit(rgb.g, 'g') / 255;

@@ -0,1 +1,4 @@

/**
* Change the color hue
*/
export default function rotate(input: string, degrees?: number): string;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hex2hsl_1 = require("./hex2hsl");
var parse_css_1 = require("./parse-css");
var shift_1 = require("./shift");
var utils_1 = require("./utils");
/**
* Change the color hue
*/
function rotate(input, degrees) {
if (degrees === void 0) { degrees = 15; }
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
var hsl = hex2hsl_1.default(input);
return shift_1.default(input, {
h: utils_1.constrainDegrees(hsl.h, degrees),
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
utils_1.invariant(!utils_1.isNumber(degrees), 'degrees must be a number');
var hex = parse_css_1.default(input);
var h = hex2hsl_1.default(hex).h;
return shift_1.shift(hex, {
h: utils_1.constrainDegrees(h, degrees),
});

@@ -13,0 +19,0 @@ }

import { HSL, RGB } from './types';
export default function shift(input: string, options: Partial<HSL | RGB>): string;
/**
* Shift color properties
*/
export declare function shift(input: string, options: Partial<HSL | RGB>): string;

@@ -14,13 +14,16 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.shift = void 0;
var hsl2hex_1 = require("./hsl2hex");
var hex2hsl_1 = require("./hex2hsl");
var hsl2hex_1 = require("./hsl2hex");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");
/**
* Shift color properties
*/
function shift(input, options) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
if (!utils_1.isPlainObject(options)) {
return input;
}
return hsl2hex_1.default(__assign(__assign({}, hex2hsl_1.default(input)), utils_1.pick(options, utils_1.HSLKeys)));
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
utils_1.invariant(!utils_1.isPlainObject(options), utils_1.messages.options);
return hsl2hex_1.default(__assign(__assign({}, hex2hsl_1.default(parse_css_1.default(input))), utils_1.pick(options, utils_1.HSLKeys)));
}
exports.default = shift;
exports.shift = shift;
//# sourceMappingURL=shift.js.map
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hex2rgb_1 = require("./hex2rgb");
var parse_css_1 = require("./parse-css");
var utils_1 = require("./utils");

@@ -9,8 +10,8 @@ /**

function textColor(input) {
utils_1.invariant(!utils_1.isString(input), 'input must be a string');
var _a = hex2rgb_1.default(input), r = _a.r, g = _a.g, b = _a.b;
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString);
var _a = hex2rgb_1.default(parse_css_1.default(input)), r = _a.r, g = _a.g, b = _a.b;
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
return yiq >= 128 ? '#000000' : '#ffffff';
}
exports.default = textColor;
//# sourceMappingURL=text-color.js.map

@@ -22,3 +22,2 @@ export interface Analysis {

}
export declare type Harmony = 'analogous' | 'complementary' | 'rectangle' | 'split' | 'split-complementary' | 'square' | 'tetradic' | 'triadic';
export interface HSL {

@@ -39,2 +38,4 @@ h: number;

export declare type PlainObject = Record<string, any>;
declare type ReturnModel<T> = T extends 'rgb' ? RGB : HSL;
export declare type Return<T> = T extends 'rgb' | 'hsl' ? ReturnModel<T> : string;
export interface RGB {

@@ -46,1 +47,3 @@ r: number;

export declare type RGBArray = [number, number, number];
export declare type Scheme = 'analogous' | 'complementary' | 'rectangle' | 'split' | 'split-complementary' | 'square' | 'tetradic' | 'triadic';
export {};

@@ -13,12 +13,164 @@ import { HSL, RGB, PlainObject, RGBArray } from './types';

/**
* Parse math string expressions.
* CSS named colors
*/
export declare const cssColors: {
aliceblue: string;
antiquewhite: string;
aqua: string;
aquamarine: string;
azure: string;
beige: string;
bisque: string;
black: string;
blanchedalmond: string;
blue: string;
blueviolet: string;
brown: string;
burlywood: string;
cadetblue: string;
chartreuse: string;
chocolate: string;
coral: string;
cornflowerblue: string;
cornsilk: string;
crimson: string;
cyan: string;
darkblue: string;
darkcyan: string;
darkgoldenrod: string;
darkgray: string;
darkgrey: string;
darkgreen: string;
darkkhaki: string;
darkmagenta: string;
darkolivegreen: string;
darkorange: string;
darkorchid: string;
darkred: string;
darksalmon: string;
darkseagreen: string;
darkslateblue: string;
darkslategray: string;
darkslategrey: string;
darkturquoise: string;
darkviolet: string;
deeppink: string;
deepskyblue: string;
dimgray: string;
dimgrey: string;
dodgerblue: string;
firebrick: string;
floralwhite: string;
forestgreen: string;
fuchsia: string;
gainsboro: string;
ghostwhite: string;
gold: string;
goldenrod: string;
gray: string;
grey: string;
green: string;
greenyellow: string;
honeydew: string;
hotpink: string;
indianred: string;
indigo: string;
ivory: string;
khaki: string;
lavender: string;
lavenderblush: string;
lawngreen: string;
lemonchiffon: string;
lightblue: string;
lightcoral: string;
lightcyan: string;
lightgoldenrodyellow: string;
lightgray: string;
lightgrey: string;
lightgreen: string;
lightpink: string;
lightsalmon: string;
lightseagreen: string;
lightskyblue: string;
lightslategray: string;
lightslategrey: string;
lightsteelblue: string;
lightyellow: string;
lime: string;
limegreen: string;
linen: string;
magenta: string;
maroon: string;
mediumaquamarine: string;
mediumblue: string;
mediumorchid: string;
mediumpurple: string;
mediumseagreen: string;
mediumslateblue: string;
mediumspringgreen: string;
mediumturquoise: string;
mediumvioletred: string;
midnightblue: string;
mintcream: string;
mistyrose: string;
moccasin: string;
navajowhite: string;
navy: string;
oldlace: string;
olive: string;
olivedrab: string;
orange: string;
orangered: string;
orchid: string;
palegoldenrod: string;
palegreen: string;
paleturquoise: string;
palevioletred: string;
papayawhip: string;
peachpuff: string;
peru: string;
pink: string;
plum: string;
powderblue: string;
purple: string;
red: string;
rosybrown: string;
royalblue: string;
saddlebrown: string;
salmon: string;
sandybrown: string;
seagreen: string;
seashell: string;
sienna: string;
silver: string;
skyblue: string;
slateblue: string;
slategray: string;
slategrey: string;
snow: string;
springgreen: string;
steelblue: string;
tan: string;
teal: string;
thistle: string;
tomato: string;
turquoise: string;
violet: string;
wheat: string;
white: string;
whitesmoke: string;
yellow: string;
yellowgreen: string;
};
/**
* Parse math string expressions
*/
export declare function expr(input: string): number;
export declare function invariant(condition: boolean, message: string, a?: any, b?: any, c?: any, d?: any, e?: any, f?: any): void;
/**
* Check if an object contains HSL values.
* Check if an object contains HSL values
*/
export declare function isHSL(input: any): input is HSL;
/**
* Check if the input is a number and no NaN
* Check if the input is a number and not NaN
*/

@@ -46,2 +198,11 @@ export declare function isNumber(input: any): input is number;

export declare function limit(input: number, type: string): number;
export declare const messages: {
amount: string;
left: string;
right: string;
input: string;
inputString: string;
invalid: string;
options: string;
};
/**

@@ -48,0 +209,0 @@ * Creates an object composed of the picked source properties.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.round = exports.pick = exports.limit = exports.isString = exports.isRGBArray = exports.isRGB = exports.isPlainObject = exports.isNumber = exports.isHSL = exports.invariant = exports.expr = exports.constrainDegrees = exports.constrain = exports.RGBKeys = exports.HSLKeys = void 0;
exports.round = exports.pick = exports.messages = exports.limit = exports.isString = exports.isRGBArray = exports.isRGB = exports.isPlainObject = exports.isNumber = exports.isHSL = exports.invariant = exports.expr = exports.cssColors = exports.constrainDegrees = exports.constrain = exports.RGBKeys = exports.HSLKeys = void 0;
exports.HSLKeys = ['h', 's', 'l'];

@@ -38,4 +38,156 @@ exports.RGBKeys = ['r', 'g', 'b'];

/**
* Parse math string expressions.
* CSS named colors
*/
exports.cssColors = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgrey: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
grey: '#808080',
green: '#008000',
greenyellow: '#adff2f',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#FAFAD2',
lightgray: '#d3d3d3',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32',
};
/**
* Parse math string expressions
*/
function expr(input) {

@@ -104,3 +256,3 @@ var chars = input.split('');

error = new Error(message.replace(/%s/g, function () { return args_1[argIndex_1++]; }));
error.name = 'Colorizr';
error.name = 'colorizr';
}

@@ -112,3 +264,3 @@ throw error;

/**
* Check if an object contains HSL values.
* Check if an object contains HSL values
*/

@@ -128,3 +280,3 @@ function isHSL(input) {

/**
* Check if the input is a number and no NaN
* Check if the input is a number and not NaN
*/

@@ -195,2 +347,11 @@ function isNumber(input) {

exports.limit = limit;
exports.messages = {
amount: 'amount must be a number',
left: 'left is required and must be a string',
right: 'right is required and must be a string',
input: 'input is required',
inputString: 'input is required and must be a string',
invalid: 'invalid input',
options: 'invalid options',
};
/**

@@ -197,0 +358,0 @@ * Creates an object composed of the picked source properties.

{
"name": "colorizr",
"version": "2.0.0-1",
"version": "2.0.0-2",
"description": "Manipulate colors like a boss",

@@ -32,16 +32,16 @@ "author": "Gil Barbara <gilbarbara@gmail.com>",

"@gilbarbara/tsconfig": "^0.1.0",
"@size-limit/preset-small-lib": "^4.6.0",
"@types/jest": "^26.0.14",
"@types/node": "^14.11.2",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"eslint": "^7.10.0",
"@size-limit/preset-small-lib": "^4.7.0",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.6",
"@typescript-eslint/eslint-plugin": "^4.6.0",
"@typescript-eslint/parser": "^4.6.0",
"eslint": "^7.12.1",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"husky": "^4.3.0",
"is-ci-cli": "^2.1.2",
"jest": "^26.4.2",
"jest": "^26.6.1",
"jest-watch-typeahead": "^0.6.1",

@@ -51,6 +51,6 @@ "prettier": "^2.1.2",

"rimraf": "^3.0.2",
"size-limit": "^4.6.0",
"ts-jest": "^26.4.0",
"size-limit": "^4.7.0",
"ts-jest": "^26.4.3",
"ts-node": "^9.0.0",
"typescript": "^4.0.3",
"typescript": "^4.0.5",
"watch-run": "^1.2.5"

@@ -68,3 +68,3 @@ },

"test:coverage": "jest --coverage --bail",
"test:watch": "jest --watch --verbose",
"test:watch": "jest --watchAll --verbose",
"format": "prettier \"**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql,mdx}\" --write",

@@ -85,7 +85,7 @@ "validate": "npm run lint && npm run test:coverage && npm run build && npm run size",

"path": "./lib/*.js",
"limit": "5 KB"
"limit": "7 KB"
},
{
"path": "./esm/*.js",
"limit": "5 KB"
"limit": "7 KB"
}

@@ -92,0 +92,0 @@ ],

# Colorizr
[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![build status](https://travis-ci.org/gilbarbara/colorizr.svg)](https://travis-ci.org/gilbarbara/colorizr) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage)
[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/colorizr) [![build status](https://travis-ci.org/gilbarbara/colorizr.svg)](https://travis-ci.org/gilbarbara/colorizr) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage)
Color conversion, manipulation and comparison.
Color conversion, manipulation, comparison and analysis.

@@ -22,171 +22,381 @@ ## Highlights

And import it:
## Usage
```javascript
import Colorizr from 'Colorizr';
```typescript
import { luminance } from 'colorizr';
const lux = luminance('#ff0044'); // 0.2168
```
## Usage
Or you can create an instance to access all methods:
```javascript
```typescript
import Colorizr from 'Colorizr';
const colorizr = new Colorizr('#ff0044');
colorizr.hex // #ff0044
colorizr.hsl // { h: 344, s: 100, l: 50 };
colorizr.rgb // { r: 255, g: 0, b: 68 };
```
## API
## Methods
### Getters
> String inputs accept css values: hex, rgb(a), hsl(a) and named colors.
**colorizr.hex**
*returns the hex*
**brightnessDifference(left: string, right: string): number**
_get the brightness difference between 2 colors_
**colorizr.hsl**
*returns the hsl object*
```typescript
import { brightnessDifference } from 'colorizr';
**colorizr.rgb**
*returns the rgb object*
brightnessDifference('#fff', 'rgb(255, 0, 68)'); // 171.003
```
**colorizr.hue**
*returns the color hue, between 0 and 360*
**chroma(input: string): number**
_get the chroma of a color_
**colorizr.saturation**
*returns the color saturation, between 0 and 100*
```typescript
import { chroma } from 'colorizr';
**colorizr.lightness**
*returns the color lightness, between 0 and 100*
chroma('#ff0044'); // 1
chroma('#ffc0cb'); // 0.2471
```
**colorizr.red**
*returns the color red level, between 0 and 255*
**colorDifference(left: string, right: string): number**
_get the color difference between 2 colors_
**colorizr.green**
*returns the color green level, between 0 and 255*
```typescript
import { colorDifference } from 'colorizr';
**colorizr.blue**
*returns the color blue level, between 0 and 255*
colorDifference('hsl(0, 0%, 100%)', '#f04'); // 442
```
**colorizr.luminance**
*returns the color luminance, between 0 and 1*
**compare(left: string, right: string): Analysis**
_get the WCAG analysis for two colors_
**colorizr.chroma**
*returns the color chroma, between 0 and 1*
```typescript
import { compare } from 'colorizr';
**colorizr.textColor**
*returns a hex value with the contrasted color*
compare('#ff0044', '#fff');
### Manipulation
{
"brightnessDifference": 171.003,
"colorDifference": 442,
"compliant": 1,
"contrast": 3.94,
"largeAA": true,
"largeAAA": false,
"normalAA": false,
"normalAAA": false,
}
```
**colorizr.lighten(percentage: number = 10)**
*returns a hex value with the increased lightness*
**contrast(left: string, right: string): number**
_get the WCAG contrast ratio between 2 colors_
**colorizr.darken(percentage: number = 10)**
*returns a hex value with the decreased lightness*
```typescript
import { contrast } from 'colorizr';
**colorizr.saturate(percentage: number = 10)**
*returns a hex value with the increased saturation*
contrast('hsl(0, 0%, 100%)', 'rgb(255, 0, 68)'); // 3.94
```
**colorizr.saturate(percentage: number = 10)**
*returns a hex value with the decreased lightness*
**darken(input: string, amount = 10): string**
_get a color with decreased lightness_
**colorizr.invert()**
*returns a hex value with the inverted color*
```typescript
import { darken } from 'colorizr';
**colorizr.fade(percentage: number = 10)**
*returns a css value with alpha*
darken('#ff0044', 10); // #cc0036
```
### Comparison
**desaturate(input: string, amount: number): string**
_get a color with decreased saturation_
**colorizr.compareTo(color: string)**
*returns an object with the analysis (check the wcga result below)*
```typescript
import { desaturate } from 'colorizr';
## Helpers
desaturate('#ff0044', 10); // #f20d4a
```
These are named exports in case you don't need the whole instance.
**fade(input: string, amount: number = 10, output?: ColorTypes = 'rgb'): string**
_get a transparent color_
```typescript
import { hex2hsl } from 'colorizr';
import { contrast } from 'colorizr';
fade('hsl(344, 100, 50)', 10); // rgba(255, 0, 68, 0.9)
fade('#ff0044', 50, 'hsl'); // hsla(344, 100%, 50%, 0.5)
```
**brightnessDifference(left: string, right: string): number**
*get the brightness difference between 2 colors*
**formatCSS(input: HSL | RGB, options?: FormatOptions): string**
_get the css string for a color model object_
**colorDifference(left: string, right: string): number**
*get the color difference between 2 colors*
```typescript
import { formatCSS } from 'colorizr';
**contrast(left: string, right: string): number**
*get the color contrast between 2 colors*
formatCSS({ h: 344, s: 100, l: 50 }, { model: 'rgb' }); // 'rgb(255, 0, 68)'
formatCSS({ r: 255, g: 0, b: 68 }, { alpha: 0.5, model: 'hsl' }); // 'hsla(344, 100%, 50%, 0.5)'
```
**formatCSS(input: HSL | RGB, options?: FormatOptions): string**
*get the css string for a color model*
**formatHex(input: string): string**
_format a short hex string 3 (or 4) digits into a 6 (or 8) digits._
**formatHex(input: string): string**
*format a short hex string 3 (or 4) digits into a 6 (or 8) digits.*
```typescript
import { formatHex } from 'colorizr';
**harmony(input: string, type: Harmony): string[]**
*get the harmony scheme for a color*
formatHex('#07e'); // '#0077ee'
formatHex('#f058'); // '#ff005588'
```
**scheme(input: string, type: Scheme): string[]**
_get the scheme for a color_
```typescript
import { scheme } from 'colorizr';
const complementary = scheme('rgb(255, 0, 68)'); // ['#ff0044', '#00ffbb']
const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
```
**hex2hsl(input: string): HSL**
*convert a hex string into a HSL object*
_convert a hex string into a HSL object_
```typescript
import { hex2hsl } from 'colorizr';
hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
```
**hex2rgb(input: string): RGB**
*convert a hex string into a RGB object*
_convert a hex string into a RGB object_
```typescript
import { hex2rgb } from 'colorizr';
hex2rgb('#ff0044'); // { r: 255, g: 0, b: 68 }
```
**hsl2hex(input: HSL): string**
*convert a HSL object into a hex string*
_convert a HSL object into a hex string_
```typescript
import { hsl2hex } from 'colorizr';
hsl2hex({ h: 344, s: 100, l: 50 }); // '#ff0044'
```
**hsl2rgb(input: HSL): RGB**
*convert a HSL object into a RGB object*
_convert a HSL object into a RGB object_
**hue2rgb**
```typescript
import { hsl2rgb } from 'colorizr';
hsl2rgb({ h: 344, s: 100, l: 50 }); // { r: 255, g: 0, b: 68 }
```
**isValidColor(input: any): boolean**
_check if the input can be parsed correctly_
```typescript
import { isValidColor } from 'colorizr';
isValidColor('#f04'); // true
isValidColor('#ff0044'); // true
isValidColor('#ff004400'); // true
isValidColor('rgb(100, 255, 0)'); // true
isValidColor('hsla(344, 100%, 50%)'); // true
isValidColor('blue'); // true
isValidColor('aliceblue'); // true
isValidColor('#mmff00'); // false
isValidColor('blue-ish'); // false
```
**isValidHex(input: any): boolean**
*check if the input is a validHex*
_check if the input is a valid hex_
```typescript
import { isValidHex } from 'colorizr';
isValidHex('#f04'); // true
```
**lighten(input: string, amount: number): string**
_get a color with increased lightness_
```typescript
import { lighten } from 'colorizr';
lighten('#ff0044', 10); // #ff3369
```
**luminance(input: string): number**
*get the color luminance*
_get the relative brightness according to the [WCAG definition](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). Normalized to `0` for black and `1` for white._
```typescript
import { luminance } from 'colorizr';
luminance('#ff0044'); // 0.2168
```
**name(input: string): string**
_get the named color. return the hex code if it can't be named_
```typescript
import { name } from 'colorizr';
name('#ffc0cb', 10); // pink
name('rgb(176, 224, 230)'); // 'powderblue'
name('hsl(344, 100, 50)'); // #ff0044
```
**palette(input: string, options?: PaletteOptions): string[]**
*get a palette for a color*
_get a palette for a color_
**parseCSS(input: string, output: ColorTypes = 'hex')**
*parse a css string to hex, hsl or rgb*
```typescript
import { palette } from 'colorizr';
palette('#ff0044');
// ['#ff0044', '#ff7700', '#88ff00', '#00ff77', '#0088ff', '#7700ff'];
palette('#ff0044', { type: 'monochromatic' });
// ['#ff99b4', '#ff5582', '#ff1150', '#cc0036', '#880024', '#440012']
```
**parseCSS(input: string, output: ColorTypes = 'hex'): string | HSL | RGB**
_parse a css string to hex, hsl or rgb_
```typescript
import { parseCSS } from 'colorizr';
parseCSS('hsl(270 60% 70%)'); // '#b385e0'
parseCSS('#ff0044', 'hsl'); // { h: 344, l: 50, s: 100 }
```
**random(): string**
*get a random color*
_get a random color_
```typescript
import { random } from 'colorizr';
random(); // '#b385e0'
```
**rgb2hex(input: RGB | RGBArray): string**
*convert a RGB object into a hex string*
_convert a RGB object into a hex string_
```typescript
import { rgb2hex } from 'colorizr';
rgb2hex({ r: 255, g: 55, b: 75 }); // '#ff374b'
rgb2hex([255, 0, 68]); // '#ff0044'
```
**rgb2hsl(input: RGB | RGBArray): HSL**
*convert a RGB object into a HSL object*
_convert a RGB object into a HSL object_
**rotate(input: string, degrees = 15): string**
```typescript
import { rgb2hsl } from 'colorizr';
**shift(input: string, options: Partial<HSL | RGB>): string**
rgb2hsl({ r: 255, g: 55, b: 75 }); // { h: 354, s: 100, l: 60.78 }
rgb2hsl([255, 0, 68]); // { h: 344, s: 100, l: 50 }
```
**text-color(input: string): string**
*get the constrasting color for the input*
**rotate(input: string, degrees = 15): string** _get a color with changed hue_
**wcag(left: string, right: string): Analysis**
*get the WCAG analysis for two colors*
```typescript
import { rotate } from 'colorizr';
rotate('#ff0044', 30); // #ff3b00
```
**saturate(input: string, amount: number): string**
_get a color with increased saturation_
```typescript
{
brightnessDifference: 189.041,
colorDifference: 595,
compliant: 2,
contrast: 10.67,
largeAA: true,
largeAAA: true,
normalAA: true,
normalAAA: true,
}
import { saturate } from 'colorizr';
saturate('#ff0044', 10); // #ff0044 (alreay at the maximum)
saturate('pink', 10); // #ffc0cb
```
**textColor(input: string): string**
_get a constrasted color to use with text_
```typescript
import { textColor } from 'colorizr';
textColor('#ff0044'); // #ffffff
textColor('#fff800'); // #000000
```
## Instance API
```typescript
import Colorizr from 'Colorizr';
const colorizr = new Colorizr('#ff0044');
colorizr.hex; // #ff0044
colorizr.hsl; // { h: 344, s: 100, l: 50 };
colorizr.rgb; // { r: 255, g: 0, b: 68 };
```
### Getters
**colorizr.hex**
_returns the hex_
**colorizr.hsl**
_returns the hsl object_
**colorizr.rgb**
_returns the rgb object_
**colorizr.hue**
_returns the color hue, between 0 and 360_
**colorizr.saturation**
_returns the color saturation, between 0 and 100_
**colorizr.lightness**
_returns the color lightness, between 0 and 100_
**colorizr.red**
_returns the color red level, between 0 and 255_
**colorizr.green**
_returns the color green level, between 0 and 255_
**colorizr.blue**
_returns the color blue level, between 0 and 255_
**colorizr.luminance**
**colorizr.chroma**
**colorizr.textColor**
### Manipulation
**colorizr.lighten(percentage = 10)**
**colorizr.darken(percentage = 10)**
**colorizr.saturate(percentage = 10)**
**colorizr.saturate(percentage = 10)**
**colorizr.rotate(degrees = 15)**
**colorizr.invert()**
**colorizr.fade(percentage = 10)**
### Comparison
**colorizr.compare(color: string)**
_returns an object with the analysis (check the compare output above)_
## References
[calculating-color-contrast](https://24ways.org/2010/calculating-color-contrast/)
[Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html)
[Contrast Checker](https://webaim.org/resources/contrastchecker/)
[Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html)
[Contrast Checker](https://webaim.org/resources/contrastchecker/)
[Converting Color Spaces in typescript](https://css-tricks.com/converting-color-spaces-in-typescript/)
import hex2rgb from './hex2rgb';
import { invariant, round, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';

@@ -8,11 +9,12 @@ /**

export default function brightnessDifference(left: string, right: string): number {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
const RGBLeft = hex2rgb(left);
const RGBRight = hex2rgb(right);
const RGBLeft = hex2rgb(parseCSS(left));
const RGBRight = hex2rgb(parseCSS(right));
const rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;
const leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;
return round(Math.abs(rightY - leftY), 4);
}
import hex2rgb from './hex2rgb';
import { invariant, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages } from './utils';

@@ -8,7 +9,7 @@ /**

export default function colorDifference(left: string, right: string): number {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
const RGBLeft = hex2rgb(left);
const RGBRight = hex2rgb(right);
const RGBLeft = hex2rgb(parseCSS(left));
const RGBRight = hex2rgb(parseCSS(right));

@@ -15,0 +16,0 @@ return (

import getLuminance from './luminance';
import { invariant, round, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';

@@ -8,7 +9,7 @@ /**

export default function contrast(left: string, right: string): number {
invariant(!isString(left), 'left is required');
invariant(!isString(right), 'right is required');
invariant(!isString(left), messages.left);
invariant(!isString(right), messages.right);
const LuminanceLeft = getLuminance(left);
const LuminanceRight = getLuminance(right);
const LuminanceLeft = getLuminance(parseCSS(left));
const LuminanceRight = getLuminance(parseCSS(right));

@@ -23,3 +24,3 @@ let output;

return round(output, 2);
return round(output);
}
import rgb2Hsl from './rgb2hsl';
import { isRGB, isHSL, isNumber, isPlainObject, invariant } from './utils';
import { isRGB, isHSL, isNumber, isPlainObject, invariant, messages } from './utils';
import { FormatOptions, HSL, RGB } from './types';

@@ -7,3 +7,3 @@ import hsl2rgb from './hsl2rgb';

export default function formatCSS(input: HSL | RGB, options: FormatOptions = {}): string {
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), 'invalid input');
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), messages.invalid);

@@ -10,0 +10,0 @@ const { alpha, model = isRGB(input) ? 'rgb' : 'hsl' } = options;

@@ -1,6 +0,6 @@

import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';
import isValidHex from './is-valid-hex';
export default function formatHex(input: string): string {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);

@@ -7,0 +7,0 @@ const color = input.replace('#', '');

import hex2rgb from './hex2rgb';
import rgb2hsl from './rgb2hsl';
import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';

@@ -8,5 +8,5 @@ import { HSL } from './types';

export default function hex2hsl(input: string): HSL {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
return rgb2hsl(hex2rgb(input));
}
import formatHex from './format-hex';
import { invariant, isString } from './utils';
import { invariant, isString, messages } from './utils';

@@ -7,3 +7,3 @@ import { RGB } from './types';

export default function hex2rgb(input: string): RGB {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);

@@ -10,0 +10,0 @@ const hex = formatHex(input).substr(1);

import hsl2rgb from './hsl2rgb';
import rgb2hex from './rgb2hex';
import { invariant, isHSL } from './utils';
import { invariant, isHSL, messages } from './utils';

@@ -11,9 +11,5 @@ import { HSL } from './types';

export default function hsl2hex(input: HSL): string {
invariant(!input, 'input is required');
invariant(!isHSL(input), messages.invalid);
if (!isHSL(input)) {
invariant(true, 'invalid input');
}
return rgb2hex(hsl2rgb(input));
}
import hue2rgb from './hue2rgb';
import { invariant, isHSL, round } from './utils';
import { invariant, isHSL, messages, round } from './utils';

@@ -10,3 +10,3 @@ import { HSL, RGB } from './types';

export default function hsl2rgb(input: HSL): RGB {
invariant(!input, 'input is required');
invariant(!input, messages.inputString);

@@ -13,0 +13,0 @@ invariant(!isHSL(input), 'invalid input');

@@ -1,9 +0,15 @@

import { constrain, constrainDegrees, invariant, isString, round } from './utils';
import { invariant } from './utils';
import chroma from './chroma';
import compare from './compare';
import darken from './darken';
import desaturate from './desaturate';
import fade from './fade';
import formatCSS from './format-css';
import lighten from './lighten';
import luminance from './luminance';
import parseColor from './parse-color';
import shift from './shift';
import rotate from './rotate';
import saturate from './saturate';
import textColor from './text-color';
import wcagAnalysis from './wcag';

@@ -21,3 +27,3 @@ import { Analysis, HSL, Options, RGB, RGBArray } from './types';

const { model = 'hsl' } = options;
const { model = 'rgb' } = options;
const { hex, hsl, rgb } = parseColor(color);

@@ -32,5 +38,3 @@

/**
* Get css string.
*
* @type {number}
* Get css string
*/

@@ -42,5 +46,3 @@ get css(): string {

/**
* Get red value.
*
* @type {number}
* Get the red value
*/

@@ -52,5 +54,3 @@ get red(): number {

/**
* Get green value.
*
* @type {number}
* Get the green value
*/

@@ -62,5 +62,3 @@ get green(): number {

/**
* Get blue value.
*
* @type {number}
* Get the blue value
*/

@@ -72,5 +70,3 @@ get blue(): number {

/**
* Get hue value.
*
* @type {number}
* Get the hue value
*/

@@ -82,5 +78,3 @@ get hue(): number {

/**
* Get saturation value,
*
* @type {number}
* Get the saturation value
*/

@@ -92,5 +86,3 @@ get saturation(): number {

/**
* Get lightness value.
*
* @type {number}
* Get the lightness value
*/

@@ -102,5 +94,3 @@ get lightness(): number {

/**
* Get luminance value.
*
* @type {number}
* Get the luminance value
*/

@@ -111,8 +101,7 @@ get luminance(): number {

/**
* Get the chroma value
*/
get chroma(): number {
const { r, g, b } = this.rgb;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
return round((max - min) / 255, 4);
return chroma(this.hex);
}

@@ -128,44 +117,34 @@

/**
* Test 2 colors for compliance.
* Test 2 colors for compliance
*/
public compareTo(input: string): Analysis {
invariant(!isString(input), 'input must be a string');
return wcagAnalysis(this.hex, input);
public compare(input: string): Analysis {
return compare(this.hex, input);
}
/**
* Increase lightness.
* Increase lightness
*/
public lighten(percentage = 10): string {
return shift(this.hex, {
l: constrain(this.lightness, percentage, [0, 100], '+'),
});
return lighten(this.hex, percentage);
}
/**
* Decrease lightness.
* Decrease lightness
*/
public darken(percentage = 10): string {
return shift(this.hex, {
l: constrain(this.lightness, percentage, [0, 100], '-'),
});
return darken(this.hex, percentage);
}
/**
* Increase saturation.
* Increase saturation
*/
public saturate(percentage = 10): string {
return shift(this.hex, {
s: constrain(this.saturation, percentage, [0, 100], '+'),
});
return saturate(this.hex, percentage);
}
/**
* Decrease saturation.
* Decrease saturation
*/
public desaturate(percentage = 10): string {
return shift(this.hex, {
s: constrain(this.saturation, percentage, [0, 100], '-'),
});
return desaturate(this.hex, percentage);
}

@@ -177,22 +156,33 @@

public invert(): string {
return shift(this.hex, {
h: constrainDegrees(this.hue, 180),
});
return rotate(this.hex, 180);
}
/**
* Fade color.
* Rotate color
*/
public rotate(degrees = 15): string {
return rotate(this.hex, degrees);
}
/**
* Fade color
*/
public fade(percentage = 10): string {
const amount = (100 - percentage) / 100;
if (this.model === 'rgb') {
return `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${amount})`;
}
return `hsla(${this.hsl.h}, ${this.hsl.s}%, ${this.hsl.l}%, ${amount})`;
return fade(this.hex, percentage, this.model);
}
}
export { formatCSS, luminance, shift, textColor, wcagAnalysis };
export {
chroma,
compare,
darken,
desaturate,
fade,
formatCSS,
lighten,
luminance,
rotate,
saturate,
textColor,
};

@@ -203,3 +193,2 @@ export { default as brightnessDifference } from './brightness-difference';

export { default as formatHex } from './format-hex';
export { default as harmony } from './harmony';
export { default as hex2hsl } from './hex2hsl';

@@ -209,4 +198,5 @@ export { default as hex2rgb } from './hex2rgb';

export { default as hsl2rgb } from './hsl2rgb';
export { default as hue2rgb } from './hue2rgb';
export { default as isValidColor } from './is-valid-color';
export { default as isValidHex } from './is-valid-hex';
export { default as name } from './name';
export { default as palette } from './palette';

@@ -217,3 +207,3 @@ export { default as parseCSS } from './parse-css';

export { default as rgb2hsl } from './rgb2hsl';
export { default as rotate } from './rotate';
export { default as scheme } from './scheme';

@@ -220,0 +210,0 @@ export * from './types';

import hex2rgb from './hex2rgb';
import { invariant, isString, round } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages, round } from './utils';

@@ -8,5 +9,5 @@ /**

export default function luminance(input: string): number {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
const { r, g, b } = hex2rgb(input);
const { r, g, b } = hex2rgb(parseCSS(input));

@@ -13,0 +14,0 @@ const rgb = [r / 255, g / 255, b / 255];

import hex2hsl from './hex2hsl';
import hsl2hex from './hsl2hex';
import parseCSS from './parse-css';
import rotate from './rotate';
import { invariant, isString } from './utils';
import { invariant, isPlainObject, isString, messages } from './utils';
import { PaletteOptions } from './types';
export default function palette(input: string, options?: PaletteOptions): string[] {
invariant(!isString(input), 'input must be a string');
export default function palette(input: string, options: PaletteOptions = {}): string[] {
invariant(!isString(input), messages.inputString);
invariant(!isPlainObject(options), messages.options);
const { lightness, saturation, size = 6, type } = options || ({} as PaletteOptions);
const hsl = hex2hsl(input);
const { lightness, saturation, size = 6, type } = options;
const hsl = hex2hsl(parseCSS(input));
const output: string[] = [];

@@ -14,0 +16,0 @@

@@ -9,3 +9,3 @@ import hex2hsl from './hex2hsl';

import rgb2hsl from './rgb2hsl';
import { invariant, isHSL, isPlainObject, isRGB, isString, limit } from './utils';
import { invariant, isHSL, isPlainObject, isRGB, isString, limit, messages } from './utils';

@@ -15,3 +15,3 @@ import { Colors, HSL, PlainObject, RGB, RGBArray } from './types';

export default function parseColor(color: string | HSL | RGB | RGBArray): Colors {
invariant(!color, 'input is required');
invariant(!color, messages.input);

@@ -58,3 +58,3 @@ const output: PlainObject = {};

} else {
throw new Error('invalid input type');
throw new Error(messages.input);
}

@@ -61,0 +61,0 @@

@@ -7,64 +7,83 @@ import hex2hsl from './hex2hsl';

import rgb2hsl from './rgb2hsl';
import { invariant, isString } from './utils';
import { cssColors, invariant, isString, messages } from './utils';
import isValidHex from './is-valid-hex';
import { ColorTypes, HSL, RGB } from './types';
import { ColorTypes, Return } from './types';
/**
* Parse CSS attribute.
* Parse CSS color
*/
export default function parseCSS(input: string, output: ColorTypes = 'hex'): string | HSL | RGB {
invariant(!isString(input), 'input must be a string');
export default function parseCSS<T extends ColorTypes = 'hex'>(
input: string,
output?: T,
): Return<T> {
invariant(!isString(input), messages.inputString);
let result: any;
if (isValidHex(input)) {
if (output === 'hsl') {
return hex2hsl(input);
}
const parsedInput = cssColors[input.toLowerCase() as keyof typeof cssColors] || input;
if (output === 'rgb') {
return hex2rgb(input);
if (isValidHex(parsedInput)) {
switch (output) {
case 'hsl': {
result = hex2hsl(parsedInput);
break;
}
case 'rgb': {
result = hex2rgb(parsedInput);
break;
}
default: {
result = parsedInput;
break;
}
}
} else {
// TODO: improve the pattern to require 3 groups
const matches = parsedInput.match(
/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i,
);
return input;
}
invariant(!matches || matches.length !== 5, 'invalid CSS string');
const matches = input.match(/(hsl|rgb)a?\((\d+),?\s*?(\d+)%?,?\s*?(\d+)%?[^)]*\)/i);
const [, model, hORr, sORg, lORb] = matches!;
let hex;
let hsl;
let rgb;
invariant(!matches || matches.length !== 5, 'invalid CSS string');
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex(hsl);
rgb = hsl2rgb(hsl);
} else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex(rgb);
hsl = rgb2hsl(rgb);
}
const [, model, hORr, sORg, lORb] = matches || [];
let hex;
let hsl;
let rgb;
if (model === 'hsl') {
hsl = {
h: parseInt(hORr, 10),
s: parseInt(sORg, 10),
l: parseInt(lORb, 10),
};
hex = hsl2hex(hsl);
rgb = hsl2rgb(hsl);
} else {
rgb = {
r: parseInt(hORr, 10),
g: parseInt(sORg, 10),
b: parseInt(lORb, 10),
};
hex = rgb2hex(rgb);
hsl = rgb2hsl(rgb);
switch (output) {
case 'hsl': {
result = hsl;
break;
}
case 'rgb': {
result = rgb;
break;
}
case 'hex':
default: {
result = hex;
break;
}
}
}
switch (output) {
case 'hsl': {
return hsl;
}
case 'rgb': {
return rgb;
}
case 'hex':
default: {
return hex;
}
}
return result as Return<T>;
}

@@ -1,2 +0,2 @@

import { invariant, isRGBArray } from './utils';
import { invariant, isRGB, isRGBArray, messages } from './utils';

@@ -9,3 +9,4 @@ import { RGB, RGBArray } from './types';

export default function rgb2hex(input: RGB | RGBArray): string {
invariant(!input, 'input is required');
invariant(!input, messages.input);
invariant(!isRGBArray(input) && !isRGB(input), messages.invalid);

@@ -22,8 +23,5 @@ let r: number;

invariant(!isRGBArray([r, g, b]), 'invalid input');
const output = [r.toString(16), g.toString(16), b.toString(16)];
// eslint-disable-next-line no-bitwise
const hex = (1 << 24) + (r << 16) + (g << 8) + b;
return `#${hex.toString(16).slice(1)}`;
return `#${output.map(d => (d.length === 1 ? `0${d}` : d)).join('')}`;
}

@@ -1,2 +0,2 @@

import { invariant, isRGB, limit } from './utils';
import { invariant, isRGB, limit, messages } from './utils';

@@ -6,3 +6,3 @@ import { RGB, HSL, RGBArray } from './types';

export default function rgb2hsl(input: RGB | RGBArray): HSL {
invariant(!input, 'input is required');
invariant(!input, messages.input);

@@ -15,3 +15,3 @@ let rgb: RGB = input as RGB;

invariant(!isRGB(rgb), 'invalid input');
invariant(!isRGB(rgb), messages.invalid);

@@ -18,0 +18,0 @@ const rLimit = limit(rgb.r, 'r') / 255;

import hex2hsl from './hex2hsl';
import shift from './shift';
import { constrainDegrees, invariant, isString } from './utils';
import parseCSS from './parse-css';
import { shift } from './shift';
import { constrainDegrees, invariant, isNumber, isString, messages } from './utils';
/**
* Change the color hue
*/
export default function rotate(input: string, degrees = 15): string {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
invariant(!isNumber(degrees), 'degrees must be a number');
const hsl = hex2hsl(input);
const hex = parseCSS(input);
const { h } = hex2hsl(hex);
return shift(input, {
h: constrainDegrees(hsl.h, degrees),
return shift(hex, {
h: constrainDegrees(h, degrees),
});
}

@@ -0,15 +1,16 @@

import hsl2hex from './hsl2hex';
import hex2hsl from './hex2hsl';
import hsl2hex from './hsl2hex';
import { HSLKeys, invariant, isPlainObject, isString, pick } from './utils';
import parseCSS from './parse-css';
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './utils';
import { HSL, RGB } from './types';
export default function shift(input: string, options: Partial<HSL | RGB>): string {
invariant(!isString(input), 'input must be a string');
/**
* Shift color properties
*/
export function shift(input: string, options: Partial<HSL | RGB>): string {
invariant(!isString(input), messages.inputString);
invariant(!isPlainObject(options), messages.options);
if (!isPlainObject(options)) {
return input;
}
return hsl2hex({ ...hex2hsl(input), ...pick(options, HSLKeys) });
return hsl2hex({ ...hex2hsl(parseCSS(input)), ...pick(options, HSLKeys) });
}
import hex2rgb from './hex2rgb';
import { invariant, isString } from './utils';
import parseCSS from './parse-css';
import { invariant, isString, messages } from './utils';

@@ -8,8 +9,8 @@ /**

export default function textColor(input: string): string {
invariant(!isString(input), 'input must be a string');
invariant(!isString(input), messages.inputString);
const { r, g, b } = hex2rgb(input);
const { r, g, b } = hex2rgb(parseCSS(input));
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
return yiq >= 128 ? '#000000' : '#ffffff';
}

@@ -26,12 +26,2 @@ export interface Analysis {

export type Harmony =
| 'analogous'
| 'complementary'
| 'rectangle'
| 'split'
| 'split-complementary'
| 'square'
| 'tetradic'
| 'triadic';
export interface HSL {

@@ -56,2 +46,6 @@ h: number;

type ReturnModel<T> = T extends 'rgb' ? RGB : HSL;
export type Return<T> = T extends 'rgb' | 'hsl' ? ReturnModel<T> : string;
export interface RGB {

@@ -64,1 +58,11 @@ r: number;

export type RGBArray = [number, number, number];
export type Scheme =
| 'analogous'
| 'complementary'
| 'rectangle'
| 'split'
| 'split-complementary'
| 'square'
| 'tetradic'
| 'triadic';

@@ -44,4 +44,157 @@ import { HSL, RGB, PlainObject, RGBArray } from './types';

/**
* Parse math string expressions.
* CSS named colors
*/
export const cssColors = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgrey: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
grey: '#808080',
green: '#008000',
greenyellow: '#adff2f',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#FAFAD2',
lightgray: '#d3d3d3',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32',
};
/**
* Parse math string expressions
*/
export function expr(input: string): number {

@@ -106,3 +259,3 @@ const chars = input.split('');

f?: any,
) {
): void {
/* istanbul ignore else */

@@ -127,3 +280,3 @@ if (process.env.NODE_ENV !== 'production') {

error = new Error(message.replace(/%s/g, () => args[argIndex++]));
error.name = 'Colorizr';
error.name = 'colorizr';
}

@@ -136,3 +289,3 @@

/**
* Check if an object contains HSL values.
* Check if an object contains HSL values
*/

@@ -156,3 +309,3 @@ export function isHSL(input: any): input is HSL {

/**
* Check if the input is a number and no NaN
* Check if the input is a number and not NaN
*/

@@ -232,2 +385,12 @@ export function isNumber(input: any): input is number {

export const messages = {
amount: 'amount must be a number',
left: 'left is required and must be a string',
right: 'right is required and must be a string',
input: 'input is required',
inputString: 'input is required and must be a string',
invalid: 'invalid input',
options: 'invalid options',
};
/**

@@ -234,0 +397,0 @@ * Creates an object composed of the picked source properties.

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc