Hex (HEX): The color in hexadecimal notation, commonly used in CSS and web design. Copy this value directly into your stylesheets.
RGB (Red, Green, Blue): The numeric RGB values on a 0–255 scale for each color channel. Use this format in CSS, HTML, or graphics software.
HSL (Hue, Saturation, Lightness): An alternative representation where hue is 0–360 degrees, saturation and lightness are percentages. Often intuitive for color adjustments.
Mix ratio: The percentage weight toward the second color. 50% is the midpoint; 0% gives you Color 1, and 100% gives you Color 2.
Preview swatch: The large colored box shows the blended result in real-time. Click on either color picker to adjust the input colors.
How This Calculator Works
This calculator uses linear RGB interpolation to blend two colors. For each red, green, and blue channel, it calculates: Blended Value = (Color1 × (1 − Ratio)) + (Color2 × Ratio). At a 50% ratio, you get the arithmetic average of each channel. The tool then converts the resulting RGB values back to hex and HSL formats for display in multiple color spaces, allowing you to use the result wherever you need it.
Quick Questions
Why does my blended color look different than expected? RGB is an additive color model used by screens. If you're used to subtractive color mixing (like with paint), the results may surprise you. Lighter colors in RGB tend to produce lighter blends.
Can I use HSL or RGB input directly? This tool accepts hex colors. If you have RGB or HSL, you can use an online converter to turn it into hex first, then paste it here.
What's the difference between hex, RGB, and HSL? They're three ways to describe the same color. Hex is compact for web; RGB is intuitive for screens; HSL is intuitive for humans. All three are equivalent.
How do I copy the result to my CSS file? Click "Copy results" or select and copy from the Hex, RGB, or HSL field. Then paste directly into your stylesheet or color property.