• Stars
    star
    123
  • Rank 290,145 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎨 Blends RGBA colors with various blend modes in JavaScript


color-blend logo showing two half-transparent, overlapping circles


color-blend

Tests Version on npm

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?

Visual representation of the example code

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.

More Repositories

1

Fuse

πŸ” Fuzzy search for PHP, ported from Fuse.js
PHP
320
star
2

auto-group-tabs

Google Chrome extension to automatically group tabs by URL
JavaScript
99
star
3

branchy

πŸƒ Execute a Node.js function in a separate process
JavaScript
93
star
4

vscode-snazzy-light

🍭 A vivid light VS Code color theme
JavaScript
35
star
5

Lowlight

πŸ›‹οΈ Show syntax-highlighted code of 150+ languages in your terminal
PHP
21
star
6

node-symfony-style-console

🎼 Use the style and utilities of the Symfony Console in Node.js
TypeScript
19
star
7

diffr

πŸ’Ž Create and share diffs with Diffr, the privacy focused online text diffing tool.
Vue
18
star
8

livy

πŸ“œ A Monolog-inspired logging library for Node.js
JavaScript
17
star
9

ico2png-cli

πŸ–Ό Batch extract PNG images out of ICO files from the command line
JavaScript
10
star
10

yufka

🌯 Transform JavaScript ASTs the easy way
TypeScript
9
star
11

prettier-php-playground

πŸ’„ A playground for the Prettier PHP plugin
Vue
7
star
12

windows-titlebar-color

πŸ– Node.js package to get the title bar color from Windows 7, 8, 8.1 or 10
JavaScript
6
star
13

node-js-php-data

Convert simple JS data to PHP
JavaScript
6
star
14

node-bash-minifier

Minify bash scripts
JavaScript
6
star
15

node-sass-yaml-importer

Allows importing YAML in Sass files parsed by node-sass.
JavaScript
5
star
16

node-path

πŸ›£ The Node.js `path` module, ported to PHP
PHP
5
star
17

node-html-api

Makes creating an HTML API a breeze
JavaScript
5
star
18

composite-symbol

✳️ Map a series of values to a unique JavaScript Symbol
JavaScript
5
star
19

gfm-preview

Simple preview for GitHub Flavored Markdown
CSS
4
star
20

php-arena

πŸ₯Š A tiny playground for tinkering with PHP snippets in the browser
TypeScript
4
star
21

gyros

πŸ₯™ Transform PHP ASTs the easy way
TypeScript
4
star
22

rx

A template tag for creating regular expressions
TypeScript
3
star
23

find-up

πŸ“ Find a file by walking up ancestor directories
PHP
3
star
24

auto-collapse-tab-groups

Google Chrome extension to automatically collapse unfocused tab groups
TypeScript
3
star
25

node-sass-js-importer

JavaScript
2
star
26

node-php-date

⏰ Use PHP's date() function in JavaScript
JavaScript
2
star
27

completarr

Zero config autocompletions for yargs apps (bash, zsh, fish)
JavaScript
2
star
28

computed-properties

A data store with support for computed properties
TypeScript
2
star
29

native-open

Open a file/URL/app from inside PHP, cross-platform
PHP
2
star
30

blackscreen

A click-to-fullscreen blackscreen PWA
HTML
2
star
31

storage-paths

πŸ—„ Get OS-specific paths for storing your project's config, cache, logs etc.
PHP
1
star
32

monomitter

πŸ“‘ A tiny, overly simplistic event bus
JavaScript
1
star
33

faction

A single-user private Composer repository
PHP
1
star
34

contao-exec-bundle

πŸ’² Execute Contao-related PHP code directly from the console
PHP
1
star
35

mastodon-bio-rss-crawler

Node.js tool for extracting websites/feeds from your Mastodon follows
JavaScript
1
star
36

sassed

πŸ‘“ A simple editor to compile Sass code in your browser
TypeScript
1
star
37

x-filesystem

πŸ“„ An extension to Symfony's Filesystem Component, able to read and write PHP/YAML/JSON/CSV files
PHP
1
star
38

simple-config

βš™οΈ Simple persistent configuration for your app or module
PHP
1
star
39

vue-browser-state

🌐 Various browser-related implementations for vue-reactivator
JavaScript
1
star
40

Collection

An extended version of Laravel Collections
PHP
1
star
41

vue-reactivator

Create reactive Vue properties from arbitrary global state
JavaScript
1
star