color-blend
Blends RGBA colors with different blend modes
This is a zero-dependency JavaScript implementation of the blend modes introduced in the W3C Compositing and Blending spec.
Altogether it's a whopping 1.1 KB small (minified & gzipped), going down to as far as 0.4 KB if you use just one blending method and a tree-shaking bundler.
Install
$ npm install --save color-blend
Usage
Example
It's really easy to wrap your head around. Consider the following simple example:
// Using vanilla Node.js
const { normal } = require('color-blend')
// Using a bundler? It will automatically pick up a
// tree-shakeable ES modules version of color-blend:
import { normal } from 'color-blend'
// Mix some green and pink
const pinkBackground = { r: 255, g: 0, b: 87, a: 0.42 }
const greenForeground = { r: 70, g: 217, b: 98, a: 0.6 }
normal(pinkBackground, greenForeground)
// returns { r: 110, g: 170, b: 96, a: 0.768 }
By the way, those are the colors from the logo above. See?
Explanation
This module provides an implementation for all blend modes listed in the aforementioned W3C document, which are:
normal
multiply
screen
overlay
darken
lighten
colorDodge
colorBurn
hardLight
softLight
difference
exclusion
hue
saturation
color
luminosity
All those methods have the same API: they take a background
and a foreground
color as arguments.
Those are expected to be RGBA colors, similar to how they appear in CSS — represented as plain objects containing the keys
r
,g
,b
(each ranging from 0 to 255)a
(ranging from 0 to 1)
The result of the blending operation will be returned as such an RGBA object as well.
Unit Colors
If you need higher precision (resulting RGB channels will be rounded to integers!) or just have a different flavor, this package offers the /unit
entry point, where all accepted and returned color channels are values between 0 and 1:
import { normal } from 'color-blend/unit'
// Still mix some green and pink
const pinkBackground = { r: 1, g: 0, b: 0.34, a: 0.42 }
const greenForeground = { r: 0.27, g: 0.85, b: 0.38, a: 0.6 }
normal(pinkBackground, greenForeground)
// returns { r: 0.43, g: 0.665, b: 0.372, a: 0.768 } (rounded to 3 decimals for brevity)
Thanks
A special "thank you" goes to Christos Lytras who helped me digging deep into the rabbit hole of color blending.