Blend two colors together to create smooth gradients and find the perfect midpoint.
This tool blends two colors by interpolating between them in RGB color space. Each color channel (red, green, blue) is mixed proportionally based on the blend ratio you set. At 0%, you see pure Color 1. At 100%, pure Color 2. At 50%, you get the exact mathematical midpoint between both colors.
For example, blending pure red (#FF0000) with pure blue (#0000FF) at 50% produces #7F007F, a shade of purple. The red channel goes from 255 to 0 (midpoint: 127), the green stays at 0, and the blue goes from 0 to 255 (midpoint: 127).
Color blending is useful for creating gradients in CSS, designing color palettes for websites and apps, finding harmonious midpoints between brand colors, generating hover states for buttons (blend the button color with white or black), and creating accessible color combinations that maintain contrast ratios.
Designers often use color blending to create cohesive UI themes. Start with your primary and secondary brand colors, then generate blended midpoints for backgrounds, borders, and subtle accents. The 5-step palette output gives you a ready-to-use color scale.
A hex color code is a 6-character string that represents a color using the hexadecimal number system (base 16). The code breaks into three pairs: the first two characters represent the red channel (00-FF), the middle two represent green, and the last two represent blue. FF is the maximum intensity (255 in decimal) and 00 is zero intensity.
Common hex codes worth knowing: #000000 is black, #FFFFFF is white, #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #808080 is medium gray. The MayoCalc brand colors are #38BDF8 (sky blue) and #34D399 (emerald green).
For a full-featured color picker with HSL, RGB, and hex conversion, see our Color Picker.
This tool blends colors in RGB space, which is the most common and intuitive method. However, RGB blending can sometimes produce muddy midpoints, especially when mixing complementary colors (like red and green, which produce a brownish gray in RGB). An alternative is HSL blending, which interpolates through the hue wheel and tends to produce more vibrant midpoints. For most practical design work, RGB blending produces the expected results.
The gradient preview above shows 11 evenly spaced steps between your two colors. Click any swatch in the 5-step palette to copy its hex code to your clipboard. These colors work well as a coordinated palette for UI design, data visualization, or any project that needs a smooth transition between two brand colors.
If you need to generate accessible color combinations that meet WCAG contrast requirements, start with your blended color and test it against white and black text. As a rule of thumb, lighter colors (higher RGB values) work better with dark text, and darker colors work better with white text. A contrast ratio of at least 4.5:1 is required for normal text under WCAG AA standards.