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

colortranslator

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

colortranslator

A JavaScript library, written in TypeScript, to convert among different color models

  • 3.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18K
decreased by-1.86%
Maintainers
1
Weekly downloads
 
Created
Source


A JavaScript library, written in TypeScript, to convert among different color models

Deployment Status   Coverage Status   npm version

Demo

https://elchininet.github.io/ColorTranslator/

Installation

Using NPM
npm install colortranslator
Using Yarn
yarn add colortranslator
In the browser

It is possible to include a compiled version of the package directly in an HTML file. It will create a global colortranslator object containing all the exported modules that can be accessed from anywhere in your JavaScript code.

  1. Copy the JavaScript file colortranslator.js, located in the dist/web/ folder
  2. Put it in the folder that you prefer in your web server
  3. Include it in your HTML file
<script src="wherever/you/installed/colortranslator.js"></script>
/* There will be a global variable named colortranslator containing all the modules */
colortranslator.ColorTranslator;
colortranslator.Harmony;
colortranslator.Mix;
Importing using CommonJS
const { ColorTranslator, Harmony, Mix } = require('colortranslator');
Importing using ES6 modules
import { ColorTranslator, Harmony, Mix } from 'colortranslator';

Scripts

build

npm run build

Transpiles the TypeScript code and creates three bundles in the dist folder (index.js for commonjs, esm/index.js for ESM, and web/colortranslator.js to use directly in the browser).

test

npm run test

Runs multiple dynamic tests converting from / to all the color models available (excepting CMYK) using a table of colors.

lint

npm run lint

Runs eslint in source files.

demo

npm run demo

Opens a development server that provides live reloading using webpack-dev-server. Some demo examples located in the @demo folder will be shown. You can modify the code of the demos and the changes will be live reloaded in the browser.

API

Note: The conversion to a CMYK color is made taking a random value of black as a base (in this case, taking the greater value from red, green or blue). When a value of black is assumed, the rest of the colors can be calculated from it. The result will be visually similar to the original light color, but if you try to convert it back you will not obtain the same original value.

Input

The most wonderful thing about colortranslator is that you don‘t need to specify the input that you are using, the library will recognise it automatically. The input can be a CSS string or an object:

CSS string inputs
Example of CSS string inputsDescription
fuchsiaColor keyword
#FF00FFHexadecimal color
#F0FShorthand hexadecimal color
#FF00FF80Hexadecimal color with alpha
#F0FFShorthand hexadecimal color with alpha
rgb(255 0 255)Functional RGB notation
rgb(100% 0% 100%)Functional RGB notation with values in percentages
rgb(255 0 255 / 0.5)Functional RGB notation with alpha
rgb(255 0 255 / 50%)Functional RGB notation CSS with alpha in percenatages
rgb(100% 0% 100% / 0.5)Functional RGB notation with values in percentages and alpha
rgb(100% 0% 100% / 50%)Functional RGB notation with values and alpha in percentages
rgb(255, 0, 255)Functional RGB notation (CSS Colors 3 comma-separated)
rgba(255, 0, 255, 0.5)Functional RGB notation with alpha (CSS Colors 3 comma-separated)
hsl(300 100% 50%)Functional HSL notation
hsl(300deg 100% 50%)Functional HSL notation with hue in degrees
hsl(270grad 100% 50%)Functional HSL notation with hue in gradians
hsl(5.24rad 100% 50%)Functional HSL notation with hue in radians
hsl(0.83turn 100% 50%)Functional HSL notation with hue in turns
hsl(300 100% 50% / 0.5)Functional HSL notation with alpha
hsl(300 100% 50% / 50%)Functional HSL notation with alpha in percentages
hsl(300, 100%, 50%)Functional HSL notation (Colors 3 comma-separated)
hsl(300deg, 100%, 50%)Functional HSL notation with hue in degrees (CSS Colors 3 comma-separated)
hsl(270grad, 100%, 50%)Functional HSL notation with hue in gradians (CSS Colors 3 comma-separated)
hsl(5.24rad, 100%, 50%)Functional HSL notation with hue in radians (CSS Colors 3 comma-separated)
hsl(0.83turn, 100%, 50%)Functional HSL notation with hue in turns (CSS Colors 3 comma-separated)
hsla(300, 100%, 50%, 0.5)Functional HSL notation with alpha (CSS Colors 3 comma-separated)
device-cmyk(0% 100% 100% 0%)Device-dependent functional CMYK notation with percentages
device-cmyk(0% 100% 100% 0% / 1)Device-dependent functional CMYK notation with percentages and alpha
device-cmyk(0% 100% 100% 0% / 100%)Device-dependent functional CMYK notation with percentages and alpha in percentages
device-cmyk(0%, 100%, 100%, 0%)Device-dependent functional CMYK notation with percentages (CSS Colors 3 comma-separated)
device-cmyk(0%, 100%, 100%, 0%, 1)Device-dependent functional CMYK notation with percentages and alpha (CSS Colors 3 comma-separated)
device-cmyk(0 1 1 0)Device-dependent functional CMYK notation with numbers
device-cmyk(0 1 1 0 / 1)Device-dependent functional CMYK notation with numbers and alpha
device-cmyk(0 1 1 0 / 100%)Device-dependent functional CMYK notation with numbers and alpha in percentages
device-cmyk(0, 1, 1, 0)Device-dependent functional CMYK notation with numbers (CSS Colors 3 comma-separated)
device-cmyk(0, 1, 1, 0, 1)Device-dependent functional CMYK notation with numbers and alpha (CSS Colors 3 comma-separated)
cmyk(0% 100% 100% 0%)Functional CMYK notation with percentages
cmyk(0% 100% 100% 0% / 1)Functional CMYK notation with percentages and alpha
cmyk(0% 100% 100% 0% / 100%)Functional CMYK notation with percentages and alpha in percentages
cmyk(0 1 1 0)Functional CMYK notation with numbers
cmyk(0 1 1 0 / 1)Functional CMYK notation with numbers and alpha
cmyk(0 1 1 0 / 100%)Functional CMYK notation with numbers and alpha in percentages
cmyk(0%, 100%, 100%, 0%)Functional CMYK notation with percentages (CSS Colors 3 comma-separated)
cmyk(0%, 100%, 100%, 0%, 1)Functional CMYK notation with percentages and alpha (CSS Colors 3 comma-separated)
cmyk(0, 1, 1, 0)Functional CMYK notation with numbers (CSS Colors 3 comma-separated)
cmyk(0, 1, 1, 0, 1)Functional CMYK notation with numbers and alpha (CSS Colors 3 comma-separated)
Object inputs
Example of object inputsDescription
{r: "0xFF", g: "0x00", b: "0xFF"}Hexadecimal color
{r: "0xF", g: "0x0", b: "0xF"}Shorthand hexadecimal color
{r: "0xFF", g: "0x00", b: "0xFF", a: "0x80"}Hexadecimal color with alpha
{r: "0xF", g: "0x0", b: "0xF", a: "0xF"}Shorthand hexadecimal color with alpha
{r: 255, g: 0, b: 255}RGB notation
{r: 255, g: 0, b: 255, a: 0.5}RGB notation with alpha
{h: 300, s: "100%", l: "50%"}HSL notation using percentages
{h: 300, s: 100, l: 50}HSL notation using numbers
{h: 300, s: "100%", l: "50%", a: 0.5}HSL notation with alpha using percentages
{h: 300, s: 100, l: 50, a: 0.5}HSL notation with alpha using numbers
{c: "0%", m: "100%", y: "100%", k: "0%"}CMYK notation using percentages
{c: 0, m: 1, y: 1, k: 0}CMYK notation using numbers
Class instantiation
ColorTranslator(color: ColorInput, options?: Options)

It is possible to instantiate the class using any of the previous inputs.

Options object
interface Options {
  decimals?: number;  // defaults to 6
  legacyCSS?: boolean; // defaults to false 
  spacesAfterCommas?: boolean; // defaults to false
  anglesUnit?: 'none' | 'deg' | 'grad' | 'rad' | 'turn'; // defaults to 'none'
  rgbUnit?: 'none' | 'percent'; // defaults to 'none'
  cmykUnit?: 'none' | 'percent'; // defaults to 'percent'
  alphaUnit?: 'none' | 'percent'; // defaults to 'none'
  cmykFunction?: 'device-cmyk' | 'cmyk'; // defaults to 'device-cmyk'
}
OptionOnly for CSS outputDescription
decimalsnoThis option sets what is the maximum number of decimals for the outputs
legacyCSSyesThis option decides if the CSS output should be CSS Level 3 (legacy) or CSS Level 4
spacesAfterCommasyesThis option only takes place if legacyCSS is set to true. It decides if the comas should have a space after
anglesUnityesThis option only takes place if the output is an HSL CSS output. It sets the degrees units of the HSL hue angle. If none is used, the output will not have any unit but its value will be the deg one (degrees)
rgbUnityesThis option only takes place if the output is an RGB CSS output. It sets the color units of the RGB and RGBA CSS outputs. If none is used the color values will be decimal between 0 and 255. If percent is used, the color values will be decimal with percentages between 0% and 100%.
cmykUnityesThis option sets the color units of the CMYK and CMYKA CSS outputs. If none is used the color values will be decimal between 0 and 1. If percent is used, the color values will be decimal with percentages between 0% and 100%.
alphaUnityesThis option only takes place if the output is a CSS Level 4 output (legacyCSS has not been set, or it has been set to false or it has been autodetected as false). This option sets the alpha units of the CSS Level 4 outputs. If none is used the alpha values will be decimal between 0 and 1. If percent is used, the alpha values will be decimal with percentages between 0% and 100%.
cmykFunctionyesThis option sets the cmyk function of the CMYK and CMYKA CSS outputs.

Note: the library tries to detect some options automatically if you don‘t send them in the options object. These are the rules for this autodetection:

  • legacyCSS: if this option is set, then its value prevails, if it is not set, and the CSS input is provided in CSS Level 3, then this option will be true, otherwise it will take its default value which is false.
  • spacesAfterCommas: if this option is set, then its value prevails, if it is not set, and the CSS input is provided with spaces after the commas, then this option will be true. If the input is not consistent in this aspect, then it will take its default value which is false (This option only takes place if legacyCSS is true or it has been autodetected as true)
  • anglesUnit: if this option is set, then its value prevails, if it is not set, and the HSL CSS input is provided with an angle unit, then it will take that value, otherwise it will use the default one wich is none.
  • rgbUnit: if this option is set, then its value prevails, if it is not set, and the RGB CSS input is provided with percentages in its color values, then it will take the pcent value, otherwise it will use the default one wich is none.
  • cmykUnit: if this option is set, then its value prevails, if it is not set, and the CMYK CSS input is provided without percentages in its color values, then it will take the none value, otherwise it will use the default one wich is percent.
  • alphaUnit: if this option is set, then its value prevails, if it is not set, and the CSS input (must be CSS Level 4) is provided with percentages in its alpha value, then it will take the percent value, otherwise it will use the default one wich is none.
  • cmykFunction: if this option is set, then its value prevails, if it is not set, and the CMYK CSS input is provided using the cmyk function, then it will take the cmyk value, otherwise it will use the default one wich is device-cmyk.
Class instantiation examples
const keyword = new ColorTranslator('deeppink');

const hex = new ColorTranslator('#FF00FF');

const rgb = new ColorTranslator('rgb(255, 0, 0)');

const hsl = new ColorTranslator('hsl(50 20% 90% / 0.5)');

const hsla = new ColorTranslator({ r: 115, g: 200, b: 150, a: 0.5 });

const cmyk = new ColorTranslator({ c: 100, m: 100, y: 0, k: 0 });
Configuration options examples
// Decimals
new ColorTranslator('#F43227').HSL; // hsl(3.219512 90.30837% 55.490196%)
new ColorTranslator('#F43227', { decimals: 4 }).HSL; // hsl(3.2195 90.3084% 55.4902%)
new ColorTranslator('#F43227', { decimals: 0 }).HSL; // hsl(3 90% 55%)
new ColorTranslator('#F43227', { decimals: 2 }).HSLObject; // {h: 3.22, s: 90.31, l: 55.49}

// legacyCSS
new ColorTranslator('#FFF').RGBA; // rgb(255 255 255 / 1)
new ColorTranslator('#FFF', { legacyCSS: false }).RGBA; // rgb(255 255 255 / 1)
new ColorTranslator('#FFF', { legacyCSS: true }).RGBA; // rgba(255,255,255,1)
new ColorTranslator('hsla(100,30%,20%,0.5)').RGBA; // rgba(45.9,66.3,35.7,0.5)
new ColorTranslator('hsl(100 30% 20% / 0.5)').RGBA; // rgb(45.9 66.3 35.7 / 0.5)

// spacesAfterCommas
new ColorTranslator('#F00', { legacyCSS: true }).RGB; // rgb(255,0,0)
new ColorTranslator('#F00', { legacyCSS: true, spacesAfterCommas: true }).RGB; // rgb(255, 0, 0)
new ColorTranslator('hsla(100,30%,20%,0.25)').RGB; // rgb(45.9,66.3,35.7)
new ColorTranslator('hsl(100, 30%, 20%, 0.25)').RGB; // rgb(45.9, 66.3, 35.7)

// anglesUnit
new ColorTranslator('#0F0').HSL; // hsl(120 100% 50%)
new ColorTranslator('#0F0', { anglesUnit: 'none' }).HSL; // hsl(120 100% 50%)
new ColorTranslator('#0F0', { anglesUnit: 'deg' }).HSL; // hsl(120deg 100% 50%)
new ColorTranslator('#0F0', { anglesUnit: 'grad' }).HSL; // hsl(133.333333grad 100% 50%)
new ColorTranslator('#0F0', { anglesUnit: 'rad' }).HSL; // hsl(2.094395rad 100% 50%)
new ColorTranslator('#0F0', { anglesUnit: 'turn' }).HSL; // hsl(0.333333turn 100% 50%)
new ColorTranslator('hsl(0.5turn 100% 50% / 0.5)').HSL; // hsl(0.5turn 100% 50%)

// rgbUnit
new ColorTranslator('#0F0').RGB; // rgb(0 255 0)
new ColorTranslator('#0F0', { rgbUnit: 'none' }).RGB; // rgb(0 255 0)
new ColorTranslator('#0F0', { rgbUnit: 'percent' }).RGB; // rgb(0% 100% 0%)
new ColorTranslator('rgb(255 255 51 / 0.5)').RGB; // rgb(255 255 51)
new ColorTranslator('rgb(20% 100% 0% / 0.5)').RGB; // rgb(20% 100% 0%)

// cmykUnit
new ColorTranslator('#0F0').CMYK; // device-cmyk(100% 0% 100% 0%)
new ColorTranslator('#0F0', { cmykUnit: 'percent' }).CMYK; // device-cmyk(100% 0% 100% 0%)
new ColorTranslator('#0F0', { cmykUnit: 'none' }).CMYK; // device-cmyk(1 0 1 0)

// alphaUnit
new ColorTranslator('#0F0').RGBA; // rgb(0 255 0 / 1)
new ColorTranslator('#0F0', { alphaUnit: 'none' }).RGBA; // rgb(0 255 0 / 1)
new ColorTranslator('#0F0', { alphaUnit: 'percent' }).HSLA; // hsl(120 100% 50% / 100%)
new ColorTranslator('hsl(100 50% 20% / 0.25)').RGBA; // rgb(42.5 76.5 25.5 / 0.25)
new ColorTranslator('rgb(0 0 0 / 50%)').HSLA; // hsl(0 0% 0% / 50%)

// cmykFunction
new ColorTranslator('#00F').CMYKA; // device-cmyk(100% 100% 0% 0% / 1)
new ColorTranslator('#00F', { cmykFunction: 'device-cmyk' }).CMYK; // device-cmyk(100% 100% 0% 0%)
new ColorTranslator('#00F', { cmykFunction: 'cmyk' }).CMYKA; // cmyk(100% 100% 0% 0% / 1)
Class public methods

There are 12 chainable public methods and 11 of them accept a number as input. The last one accepts an options object:

Public methodsInputDescription
setH0 ≤ input ≤ 360Sets the color hue
setS0 ≤ input ≤ 100Sets the color saturation percentage
setL0 ≤ input ≤ 100Sets the color lightness percentage
setR0 ≤ input ≤ 255Sets the red value of the color
setG0 ≤ input ≤ 255Sets the green value of the color
setB0 ≤ input ≤ 255Sets the blue value of the color
setC0 ≤ input ≤ 100Sets the CMYK cyan percentage value of the color
setM0 ≤ input ≤ 100Sets the CMYK magenta percentage value of the color
setY0 ≤ input ≤ 100Sets the CMYK yellow percentage value of the color
setK0 ≤ input ≤ 100Sets the CMYK black percentage value of the color
setA0 ≤ input ≤ 1Sets the alpha value of the color
setOptionsOptionsSets an object that would work as configuration options
Class public methods examples

You can also consult the demo 1 and the demo 2 to check the use of the public methods.

const color = new ColorTranslator('#FF00FF');

color
  .setH(120)
  .setS(80)
  .setA(0.5);

color
  .setR(255)
  .setG(150)
  .setA(0.25);
Class public readonly properties

There are 7 properties to get the CSS representation of the color:

PropertyDescription
HEXGets the the object hex representation of the color
HEXAGets the the object hexa representation of the color
RGBGets the the object rgb representation of the color
RGBAGets the the object rgba representation of the color
HSLGets the the object hsl representation of the color
HSLAGets the the object hsla representation of the color
CMYKGets the the object cmyk representation of the color

There are 7 properties to get the object representation of the color:

PropertyDescription
HEXObjectGets the the object hex representation of the color
HEXAObjectGets the the object hexa representation of the color
RGBObjectGets the the object rgb representation of the color
RGBAObjectGets the the object rgba representation of the color
HSLObjectGets the the object hsl representation of the color
HSLAObjectGets the the object hsla representation of the color
CMYKObjectGets the the object cmyk representation of the color

There are 11 properties to get the individual color values:

PropertyDescription
HGets the color hue
SGets the color saturation percentage
LGets the color lightness percentage
RGets the red value of the color
GGets the green value of the color
BGets the blue value of the color
CGets the CMYK cyan percentage value of the color
MGets the CMYK magenta percentage value of the color
YGets the CMYK yellow percentage value of the color
KGets the CMYK black percentage value of the color
AGets the alpha value of the color

And a property to get the options object that acts as a configuration object for the outputs

PropertyDescription
optionsGet the configuration object value
Class public properties examples

You can also consult the demo 1 and the demo 2 to check the use of the public properties.

const color = new ColorTranslator('#FF00FF', { decimals: 2 });

color.R; // 255
color.G; // 0
color.B; // 255
color.RGB; // rgb(255 0 255)
color.HSLA; // hsl(300 100% 50% / 1)
color.options; // { decimals: 2 }
Class static methods

For the static methods, it is not needed to specify the input color model, the API will detect the format automatically. It is only needed to specify to which color model one wants to convert calling the specific static method.

There are 43 static methods available, 16 of them to convert colors, 12 to create color blends, 12 to mix colors, one to get shades, one to get tints, and one to create color harmonies.

Note: The static methods also count with the options-autodetection feature that was explained in the options object section, but in this case it scans all the inputs that are CSS, and it tries to detect the options in each one of them. If one of the autodetected options is consistent in all the inputs, then it takes the autodetected value, otherwise it will use the default one.

Color conversion static methods

The static methods to convert colors accept any of the mentioned inputs as the first parameter, the second parameter is optional and it is an options object (this second option is not present in the methods to generate HEX colors):

convertColorStaticMethod(
  color: string | object,
  options?: Options
)
Color conversion static methods description
Static methodDescription
toHEXConverts to an hexadecimal notation
toHEXObjectConverts to an object in hexadecimal notation
toHEXAConverts to an hexadecimal notation with alpha
toHEXAObjectConverts to an object in hexadecimal notation with alpha
toRGBConverts to an RGB notation
toRGBObjectConverts to an object in RGB notation
toRGBAConverts to an RGB notation with alpha
toRGBAObjectConverts to an object in RGB notation with alpha
toHSLConverts to an HSL notation
toHSLObjectConverts to an object in HSL notation
toHSLAConverts to an HSL notation with alpha
toHSLAObjectConverts to an object in HSL notation with alpha
toCMYKConverts to a CMYK notation
toCMYKObjectConverts to an object in CMYK notation
Color conversion static methods examples
ColorTranslator.toHEX('gold'); // #FFD700

ColorTranslator.toRGB('#FF00FF'); // rgb(255 0 255)

ColorTranslator.toRGBA(
  'hsl(50, 20%, 90%)',
  { decimals: 0 }
); // rgba(235,233,224,1)

ColorTranslator.toHSL('rgb(255 0 0)'); // hsl(0 100% 50%)

ColorTranslator.toHSLA('rgba(0, 255, 255, 0.5)'); // hsla(180,100%,50%,0.5)

ColorTranslator.toCMYKObject('#F0F'); // {c: 0, m: 100, y: 0, k: 0}

ColorTranslator.toCMYK('#F0F'); // cmyk(0% 100% 0% 0%)

ColorTranslator.toRGB(
  { h: 115, s: '70%', l: '45%' },
  { decimals: 0 }
); // rgb(48 195 34)

ColorTranslator.toHSLA(
  { r: 115, g: 200, b: 150, a: 0.5 },
  { decimals: 1 }
); // hsl(144.7 43.6% 61.8% / 0.5)

ColorTranslator.toHSLA(
  { r: 95, g: 23, b: 12, a: Math.SQRT1_2 },
  { decimals: 4 }
); // hsl(7.9518 77.5701% 20.9804% / 0.7071)

You can also consult the demo 3, and the demo 4 to check the use of these static methods.

Color blends static methods

The static methods to create color blends accept any of the mentioned inputs as the first and second parameter, the third parameter is optional and it is the number of steps of the blending. And the fourth parameter is also optional and it is an options object (this fourth option is not present in the methods to generate HEX colors):

getBlendColorsStaticMethod(
  fromColor: string | object,
  toColor: string | object,
  steps: number = 5,
  options?: Options
)
Color blends static methods description
Static methodDescription
getBlendHEXCreates an array relative to the blend between two colors in hexadecimal notation
getBlendHEXObjectCreates an array of objects relative to the blend between two colors in hexadecimal notation
getBlendHEXACreates an array relative to the blend between two colors in hexadecimal notation with alpha
getBlendHEXAObjectCreates an array of objects relative to the blend between two colors in hexadecimal notation with alpha
getBlendRGBCreates an array relative to the blend between two colors in RGB notation
getBlendRGBObjectCreates an array of objects relative to the blend between two colors in RGB notation
getBlendRGBACreates an array relative to the blend between two colors in RGB notation with alpha
getBlendRGBAObjectCreates an array of objects relative to the blend between two colors in RGB notation with alpha
getBlendHSLCreates an array relative to the blend between two colors in HSL notation
getBlendHSLObjectCreates an array of objects relative to the blend between two colors in HSL notation
getBlendHSLACreates an array relative to the blend between two colors in HSL notation with alpha
getBlendHSLAObjectCreates an array of objects relative to the blend between two colors in HSL notation with alpha
Color blends static methods examples
ColorTranslator.getBlendHEX('#FF0000', '#0000FF', 5);

// [
//   "#FF0000",
//   "#BF003F",
//   "#7F007F",
//   "#3F00BF",
//   "#0000FF"
// ]

ColorTranslator.getBlendHSLA('#FF000000', '#0000FFFF', 3);

// [
//   "hsl(0 100% 50% / 0)",
//   "hsl(300 100% 25% / 0.5)",
//   "hsl(240 100% 50% / 1)"
// ]

ColorTranslator.getBlendRGBAObject('#F000', 'rgba(0,0,255,1)', 5);

// [
//   {r: 255, g: 0, b: 0, a: 0},
//   {r: 191.25, g: 0, b: 63.75, a: 0.25},
//   {r: 127.5, g: 0, b: 127.5, a: 0.5},
//   {r: 63.75, g: 0, b: 191.25, a: 0.75},
//   {r: 0, g: 0, b: 255, a: 1}
// ]

You can also consult the demo 5 to check the use of these static methods.

Color mix static methods

The static methods to mix colors accept an array of any of the mentioned inputs as the first parameter. The second parameter is optional and specifies the mixing mode (by default it will be Mix.ADDITIVE). And the third parameter is also optional and it is an options object (this third option is not present in the methods to generate HEX colors):

Note: The subtractive mix simulates the mixing of pigments, to achieve this, the rgb colors are converted to ryb color model, the addition is performed in this mode and at the end the result is converted back to rgb. The result is OK most of the time, but as this is not a real mix of pigments, sometimes the result could differ from the reality.

getMixColorsStaticMethod(
  colors: [string | object][],
  mode: Mix = Mix.ADDITIVE,
  options?: Options
)
Color mix static methods description
Static methodDescription
getMixHEXGets the mix of the input colors in hexadecimal notation
getMixHEXObjectGets the mix of the input colors in an object in hexadecimal notation
getMixHEXAGets the mix of the input colors in hexadecimal notation with alpha
getMixHEXAObjectGets the mix of the input colors in an object in hexadecimal notation with alpha
getMixRGBGets the mix of the input colors in RGB notation
getMixRGBObjectGets the mix of the input colors in an object in RGB notation
getMixRGBAGets the mix of the input colors in RGB notation with alpha
getMixRGBAObjectGets the mix of the input colors in an object in RGB notation with alpha
getMixHSLGets the mix of the input colors in HSL notation
getMixHSLObjectGets the mix of the input colors in an object in HSL notation
getMixHSLAGets the mix of the input colors in HSL notation with alpha
getMixHSLAObjectGets the mix of the input colors in an object in HSL notation with alpha
Color mix static methods examples
ColorTranslator.getMixHEX(['#FF0000', '#0000FF']);

// #FF00FF

ColorTranslator.getMixHSL(['rgba(255, 0, 0, 1)', '#00FF00']);

// hsl(60 100% 50%)

ColorTranslator.getMixHEXAObject(['#F00', 'rgb(0, 0, 255)'], Mix.ADDITIVE);

// { r: '0xFF', g: '0x00', b: '0xFF', a: '0xFF' }

ColorTranslator.getMixHEX(['#FF0', '#F00'], Mix.SUBTRACTIVE);

// #FF8800

You can also consult the demo 7 and demo 8 to check the use of these static methods.

Color shades and color tints static methods

The static methods to get shades or tints of a color accept any of the mentioned inputs as the first parameter. The second parameter specifies the number of shades or tints that should be returned and the third parameter is optional and it is an options object. This method will return the colors in the same format that was sent as input:

getShades(
  color: string | object,
  shades: number,
  options?: Options
)

getTints(
  color: string | object,
  tints: number,
  options?: Options
)
Color shades and color tints static methods description
Static methodDescription
getShadesGets shades of a colour (mix the color with black increasing its darkness)
getTintsGets tints of a colour (mix the color with white increasing its lightness)
Color shades and color tints static methods examples
ColorTranslator.getShades('#FF0000', 5);

// [
//   "#D40000",
//   "#AA0000",
//   "#800000",
//   "#550000",
//   "#2A0000"
// ]

ColorTranslator.getTints({r: 255, g: 0, b: 0, a: 0.5}, 5);

// [
//   {r: 255, g: 42.5, b: 42.5, a: 0.5},
//   {r: 255, g: 85, b: 85, a: 0.5},
//   {r: 255, g: 127.5, b: 127.5, a: 0.5},
//   {r: 255, g: 170, b: 170, a: 0.5},
//   {r: 255, g: 212.5, b: 212.5, a: 0.5}
// ]

You can also consult the demo 6 to check the use of these static methods.

Color harmonies static method

The static method to create color harmonies accepts four parmeters, the first one could be any of the mentioned inputs, the second one is optional and it is to specify the kind of harmony (by default it will be Harmony.COMPLEMENTARY), the third one is also optional and it specifies if the returned harmony is based on additive or subtractive colors (by default it will be Mix.ADDITIVE), and the fourth parameter is also optional and it is an options object. This method will return the colors in the same format that was sent as input:

getHarmony(
  color: string | object
  harmony: Harmony = Harmony.COMPLEMENTARY,
  mode: Mix = Mix.ADDITIVE,
  options?: Options
)
Color harmonies static method description
Static methodDescription
getHarmonyReturns an array of colors representing the harmony requested. The color output will be the same that was sent as input
Available armonies
HarmonyDescriptionReturned colors
ANALOGOUSReturns the same color plus the two relative analogous colours3
COMPLEMENTARYReturns the same color plus the relative complementary color2
SPLIT_COMPLEMENTARYReturns the same color plus the two relative split complementary colours3
SQUAREReturns the same color plus the three relative evenly square colours4
TETRADICReturns the same color plus the three relative tetradic colours4
TRIADICReturns the same color plus the two relative evenly triadic colors3
Color harmonies static method examples
ColorTranslator.getHarmony('#FF00FF');

// ["#FF00FF", "#00FF00"]

ColorTranslator.getHarmony('rgba(0 255 255 / 0.5)', Harmony.ANALOGOUS);

// [
//   "rgba(0 255 255 / 0.5)",
//   "rgba(0 127.5 255 / 0.5)",
//   "rgba(0 255 127.5 / 0.5)"
// ]

ColorTranslator.getHarmony(
  { r: 115, g: 200, b: 150, a: 0.5 },
  Harmony.COMPLEMENTARY,
  Mix.ADDITIVE,
  { decimals: 2 }
);

// [
//   {r: 115, g: 200, b: 150, a: 0.5},
//   {r: 200, g: 123.75, b: 115, a: 0.5}
// ]

ColorTranslator.getHarmony('#FF0000', Harmony.COMPLEMENTARY, Mix.SUBTRACTIVE);

// ["#FF0000", "#00FF00"]

You can also consult the demo 9 and demo 10 to check the use of this static method.

TypeScript Support

The package has its own type definitions, so it can be used in a TypeScript project without any issues. The next interfaces are exposed and can be imported in your project:

InputOptions

This is the type of the options object that can be sent to the class constructor or to the static methods.

interface InputOptions {
    decimals?: number;
    legacyCSS?: boolean;
    spacesAfterCommas?: boolean;
    anglesUnit?: 'none' | 'deg' | 'grad' | 'rad' | 'turn';
    rgbUnit?: 'none' | 'percent';
    cmykUnit?: 'none' | 'percent';
    alphaUnit?: 'none' | 'percent';
    cmykFunction?: 'device-cmyk' | 'cmyk';
}
HEXObject

This type is returned by the HEXObject, and HEXAObject properties, the toHEXObject, toHEXAObject, getBlendHEXObject, getBlendHEXAObject, getMixHEXObject, and the getMixHEXAObject methods, and the getHarmony method (when the input is an HEXObject).

interface HEXObject {
    r: string;
    g: string;
    b: string;
    a?: string;
}
RGBObject

This type is returned by the RGBObject, and RGBAObject properties, the toRGBObject, toRGBAObject, getBlendRGBObject, getBlendRGBAObject, getMixRGBObject, and the getMixRGBAObject methods, and the getHarmony method (when the input is an RGBObject).

interface RGBObject {
    r: number;
    g: number;
    b: number;
    a?: number;
}
HSLObject

This type is returned by the HSLObject, and HSLAObject properties, the toHSLObject, toHSLAObject, getBlendHSLObject, getBlendHSLAObject, getMixHSLObject, and the getMixHSLAObject methods, and the getHarmony method (when the input is an HSLObject).

interface HSLObject {
    h: number;
    s: number;
    l: number;
    a?: number;
}
CMYKObject

This type is returned by the CMYKObject property, and the toCMYKObject and toCMYKAObject methods.

interface CMYKObject {
    c: number;
    m: number;
    y: number;
    k: number;
}

Keywords

FAQs

Package last updated on 20 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

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