How it works
Linearly interpolate each encoded sRGB channel and round to the nearest byte.
Input definitions
- First HEX color
- Enter the value in the labeled unit.
- Second HEX color
- Enter the value in the labeled unit.
- Second color share (%)
- Enter the value in the labeled unit.
A worked example
- First HEX color
- #000000
- Second HEX color
- #ffffff
- Second color share (%)
- 50
Assumptions & limits
Opaque six-digit HEX colors; interpolation in encoded sRGB, no alpha compositing or color-profile conversion.
Sources & review
Maintained by AnsRio. Methods and examples use automated checks; this does not imply independent professional certification.
Method updated 2026-10-17. Content checked against the stated method and examples. Our verification approach.
Common questions
Why is a 50% black and white blend #808080?
This tool averages encoded sRGB bytes and rounds the channels. Linear-light mixing produces a different, brighter midpoint; the method here is deliberately an encoded-channel blend.
Does generated CSS or a color result guarantee an accessible design?
No. Test the result in its real layout, including text contrast, browser zoom, focus and responsive behavior. A code generator only covers its documented property or color operation.
How does the Blend two HEX colors tool work?
Linearly interpolate each encoded sRGB channel and round to the nearest byte.
What are the assumptions and limits of Blend two HEX colors?
Opaque six-digit HEX colors; interpolation in encoded sRGB, no alpha compositing or color-profile conversion.