Blend colors by mode

Apply a named blend mode before combining foreground alpha with a backdrop.

Normal #ac4c8f #ac4c8f
Multiply #24338b #24338b
Screen #ad7cf0 #ad7cf0

Keep the mode and layer order visible

A 65 percent rose foreground over an opaque blue backdrop produces different opaque sRGB results for normal, multiply, and screen.

Call blend on the foreground

The receiving color is the source layer. The argument is the backdrop. Reversing them changes the arithmetic and the result.

<?php

use PhpColor\Color\Color;

$foreground = Color::parse('rgb(244 63 94 / 65%)');
$backdrop = Color::parse('#2563eb');

printf("%s\n%s\n",
    $foreground->blend($backdrop, 'multiply')->toHex(true),
    $foreground->blend($backdrop, 'screen')->toHex(true),
);

// #24338bff
// #ad7cf0ff
use PhpColor\Color\Color; $foreground = Color::parse('rgb(244 63 94 / 65%)'); $backdrop = Color::parse('#2563eb'); printf("%s\n%s\n", $foreground->blend($backdrop, 'multiply')->toHex(true), $foreground->blend($backdrop, 'screen')->toHex(true), ); // #24338bff // #ad7cf0ff

Blend is not mix

Mixing selects a point between two colors in a chosen interpolation space. Blending applies a channel mode and source-over alpha order in sRGB.

ForegroundThe object receiving blend() is the source layer.
BackdropThe method argument supplies the destination layer.
ModeNormal, multiply, screen, overlay, darken, and lighten are supported.
Return typeThe result is converted back to the source object type.

Choose a next step

Choose the mode and preserve the layer order