Quick implementation
/* Luminosity blend — preserves luminance from base, takes hue/saturation from blend layer */
.luminosity-container {
position: relative;
isolation: isolate; /* creates stacking context */
}
.luminosity-base {
position: absolute;
inset: 0;
/* Grayscale or desaturated base — luminance source */
background: linear-gradient(135deg,
oklch(0.92 0 0),
oklch(0.25 0 0)
);
}
.luminosity-overlay {
position: absolute;
inset: 0;
/* The color layer — provides hue and saturation only */
background: oklch(0.65 0.22 280);
mix-blend-mode: luminosity;
}
/* Alternative: background-blend-mode on a single element */
.luminosity-combined {
/* Base image/color */
background-image: url('photo.jpg');
/* Overlay color */
background-color: oklch(0.65 0.22 280);
/* Blend the two layers */
background-blend-mode: luminosity;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a CSS-only color
filtering system for product cards.
Goal: Use mix-blend-mode: luminosity to apply brand color tints
to grayscale images while preserving their original lightness
and contrast values.
Technical constraints:
- Use mix-blend-mode: luminosity on an overlay element, not
filter or filter: hue-rotate
- The base layer must be grayscale (use filter: grayscale(100%)
or a desaturated background)
- All colors must be in oklch() syntax, not hex or rgb()
- The overlay must use isolation: isolate to contain the blend
- Include a smooth transition on the overlay opacity for hover
effects (0.25s cubic-bezier(0.4, 0, 0.2, 1))
Framework variant (pick one):
A) Vanilla HTML + CSS with a <div class="card"> container,
<img class="base-image">, and <div class="color-overlay">
B) React component accepting props: { imageSrc, brandColor: string,
intensity: number (0-100), onHover?: boolean }
Edge cases to handle:
- What happens if the base image is already fully saturated?
(luminosity mode will desaturate it, which may look odd)
- What if the overlay color has very low lightness (e.g.,
oklch(0.2 0.3 280))? The result will be nearly black
- Screen readers: the overlay is decorative, so ensure the
image has alt text and the overlay has aria-hidden="true"
- Backdrop-filter fallback: luminosity blend is widely supported,
but test in older browsers for compositing issues
Return the HTML structure and CSS with inline comments.Why this matters in 2026
Design systems increasingly require flexible color theming without duplicating assets. The luminosity blend mode lets you apply any brand color to a grayscale base while preserving the original lightness values — critical for maintaining readability and visual hierarchy. This replaces expensive image preprocessing or JavaScript-based color manipulation with a single CSS property.
The logic
The luminosity blend mode computes the result by taking the luminance (perceived brightness) from the base layer and the hue and saturation from the blend layer. Mathematically, it converts both colors to HSL, then combines result = (lum: base, hue: blend, sat: blend). A grayscale base (oklch(0.5 0 0)) has zero saturation, so it contributes only luminance. When you overlay oklch(0.65 0.22 280), the result has the same lightness as the grayscale but takes on the purple hue and saturation. This creates a colorized version that respects the original contrast and tonal range.
color blend mode. While color preserves hue/saturation and takes luminance from the blend layer, luminosity does the opposite.
Accessibility & performance
Accessibility: The color overlay is purely decorative and should not convey critical information. Always ensure the base layer (image or text) maintains sufficient contrast on its own. Use aria-hidden="true" on decorative overlay elements. For text, test that the luminosity-blended result meets WCAG 2.1 AA contrast ratios (4.5:1 for normal text, 3:1 for large text).
Performance: Blend modes trigger GPU compositing, which is generally efficient. However, avoid applying mix-blend-mode to large, frequently-animated elements. For hover effects, animate opacity on the overlay rather than the blend mode itself. Modern browsers handle luminosity efficiently, but test on low-end devices if you have many blended elements on a single page.
mix-blend-mode: luminosity is widely supported in all major browsers (Chrome, Firefox, Safari, Edge) as part of CSS Compositing and Blending Level 1. However, older mobile browsers may lack support — consider a solid color fallback using @supports (mix-blend-mode: luminosity).