Color mixing function

Javascript clone of sass mix function.

Import

import { mixColors, shade, tint, isColorValid, normalizeColor } from '@adso-ts/mix-colors';

How to use

const baseColor = '#000000';  // alternative format: '000000', '000'
const color = '#0099cb';      // alternative format: '0099cb'
const percentage = 20         // valid formats: '20%', 20.0, '20,0'

const shade = mixColors(baseColor, color, percentage); 
const shade = shade(color, percentage);

const shade = mixColors(baseColor, color, percentage); 
const shade = shade(color, percentage);

const shade = mixColors('#fff', color, percentage); 
const shade = tint(color, percentage);

sass equivalent

$shade = mix('#000000', '#0099cb', 20);

Other available functions

isColorValid

const color1 = '#000000';  // isColorValid = true
const color2 = 'fff000';   // isColorValid = true
const color3 = '060';      // isColorValid = true
const color3 = '#ff0';     // isColorValid = true
const color4 = 'ff'        // isColorValid = false

normalizeColor

const color1 = '#000000';  // normalizeColor = 000000
const color2 = 'fff000';   // normalizeColor = fff000
const color3 = '060';      // normalizeColor = 006600
const color3 = '#ff0';     // normalizeColor = ffff00
const color4 = 'ff'        // normalizeColor = ff

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2020-11-22)

Features

• micColors: optimizes code, rearranges utils functions (d7ea2f4)

1.1.1 (2020-11-15)

Bug Fixes

• all: add index js files (5a8bc29)

1.1.0 (2020-11-15)

Features

• mixColors: package rename, adds shorthand notation support (45aedf3)