mix
Updated on August 22, 2024Source codeTests
createMix is a pipe that transforms a color (which can be any CSS color, or any CSS color plus a mix percentage value) to a mix of that color and another given color, in a given color space.
Create mix
Call createMix with these parameters to create your mix function:
Parameter
Type
Required
Description
color2string
yes
The color to mix with your given color.
optionsObject
no
Options to customize the behavior of the
mix function. See the Options section for more guidance.Options
mix works by
- Creating an element and setting its color to a CSS
color-mixvalue - Inserting the element into the DOM as the child of a given parent
- Reading the computed color value of the element
- Removing the element from the DOM
These options allow you to customize that behavior.
Option
Type
Default
Description
tagHTML tag
divTag name for the element that will be inserted into the DOM.
getParentFunction
() => document.bodyA function that should return the parent element into which the element will be inserted.
Example
import { createMix } from '@baleada/logic'
const mixWithBlue = createMix('blue')
const purple = mixWithBlue('red')
const fuchsia = mixWithBlue('red 70%')
