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.
Creating button hover states: A common design pattern is to darken a button on hover. Instead of guessing, blend your button color with black (#000000) at 15-20% to get a natural, harmonious darker shade. For a lighter hover effect (useful on dark backgrounds), blend with white (#FFFFFF) at 15-20%. This produces consistent results that match your color scheme better than arbitrary darkening.
Building color scales for data visualization: If you're creating charts or heatmaps, you need a smooth gradient between two meaningful colors (like green for good and red for bad). This blender generates the intermediate steps. The 5-step palette output gives you ready-to-use values for a 5-point scale. For more granular scales, adjust the blend ratio manually at 10%, 20%, 30%, etc. to generate a 10-step palette.
Finding accessible text colors: When you have a background color and need to pick text that's readable, blending your background with pure white or pure black at different ratios helps you find the sweet spot. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. As a rule of thumb, very light backgrounds (blends closer to white) need dark text, and very dark backgrounds need light text.
Harmonizing brand colors: If your brand uses two primary colors that feel disconnected, the midpoint blend often works as a natural tertiary color for accents, borders, or secondary UI elements. Many professional design systems are built exactly this way: two anchor colors with blended intermediaries that create a cohesive palette.
This tool blends in RGB color space, which is the standard for web design and CSS. RGB blending is predictable and produces the colors you'd expect in most cases. However, there are situations where RGB blending produces unexpected results. Blending complementary colors (colors on opposite sides of the color wheel, like red and cyan, or blue and orange) in RGB tends to produce muddy grays or browns because the channels cancel each other out at the midpoint.
Alternative color spaces like HSL (Hue, Saturation, Lightness) or OKLCH (a perceptually uniform color space) handle these edge cases better by interpolating through the hue wheel rather than averaging channel values. For most everyday design work, RGB blending is perfectly fine. If you're creating complex gradients between very different hues, experiment with both approaches. CSS now supports oklch() natively, making perceptually smooth gradients easier to implement in modern browsers.