Alpha blending formula
Formula
C_out = C_fg × α + C_bg × (1 - α) per channel.
Variables
- R, G, B
- sRGB channels (0–255 or 0–1 normalized)
- H, S, L
- Hue (degrees), saturation and lightness (0–1) in HSL
- L
- Relative luminance (WCAG) or lightness in HSL/OKLCH
FAQ
- Is Alpha blending formula accurate for print workflows?
- Screen RGB and print CMYK use different gamuts. Treat conversions as approximate proofs; calibrate with ICC profiles for commercial print.
- Can I use this formula in CSS?
- Modern CSS supports color-mix(), oklch(), and lab() for many operations. For complex pipelines, compute in JavaScript and export CSS variables.
- Does Color DevByte upload my colors?
- No. Formula reference pages are static documentation; interactive tools run 100% client-side in your browser.
Overview
Composite foreground over background with transparency.
Color DevByte documents this formula for developers, designers, and accessibility reviewers who need reproducible color math without sending data to a server.
Use the linked color tools to apply this formula interactively with live preview and multi-format export.
When to use this formula
Apply the alpha blending formula when building design tokens, validating WCAG contrast, or automating color pipelines in CSS, Tailwind, or design-system JSON.
For production UI, always verify results with a contrast checker or visual preview — edge cases in gamma correction and gamut mapping can shift outcomes.
Implementation notes
Browser-based tools should linearize sRGB before luminance or ΔE calculations.
Prefer OKLCH or LAB interpolation for gradients and themes to avoid grayish midpoints common in RGB blends.