@napolab/alpha-blend NPM

`@napolab/alpha-blend`

@napolab/alpha-blend library image

A TypeScript package to perform the alpha blending of two colors based on the given mathematical formulas.

日本語の README はこちら

Formulas

The blending is calculated using the following formulas:

\begin{align}
\alpha &= \alpha_b \alpha_f + \alpha_b (1 - \alpha_f) + (1 - \alpha_b) \alpha_f \tag{1} \\
&= \alpha_b + \alpha_f - \alpha_b \alpha_f \\
&= \alpha_b (1 - \alpha_f) + \alpha_f \\
C &= \frac{\alpha_b (1 - \alpha_f) C_b + \alpha_f C_f}{\alpha} \tag{4}
\end{align}

For a detailed explanation, please refer to this article.

Usage

Features

Blend two colors with their respective alpha values.
Get the resulting color in HEX format.
Handle both HEX and RGBA input formats.

Sample Code

import { alphaBlend } from "@napolab/alpha-blend";

const foregroundColor = "#ff5733";
const backgroundColor = "rgba(255, 87, 51, 0.5)";
const blendedColor = alphaBlend(foregroundColor, backgroundColor);

// Outputs: '#ff5733ff'.
blendedColor;