Blend two colours and see the resulting mix with RGB and hex values
Colour mixing is a fundamental concept in design, art, and web development. Whether you are choosing a colour scheme for a website, mixing paints for a room, or creating a brand identity, understanding how colours blend together is essential. This calculator uses additive RGB colour mixing, which is the model used by computer screens, televisions, and digital displays. In the additive RGB model, colours are created by combining red, green, and blue light in various intensities. Each channel ranges from 0 (no light) to 255 (maximum intensity). When all three channels are at maximum (255, 255, 255), the result is white. When all are at zero, the result is black. This is different from subtractive colour mixing used in paint and print (CMYK), where combining all colours produces a dark brown or black. Hexadecimal colour codes are the standard way to specify colours in web design and development. A hex code like #FF5733 represents the RGB values in base-16: FF = 255 (red), 57 = 87 (green), 33 = 51 (blue). This compact notation makes it easy to share and reproduce exact colours. CSS also supports rgb() notation (e.g., rgb(255, 87, 51)) and HSL notation (hue, saturation, lightness), which some designers find more intuitive for creating colour palettes.
To mix two colours and see the result: 1. Select Colour 1 from the preset options. These cover the primary colours (red, green, blue), secondary colours (yellow, magenta, cyan), neutrals (black, white, grey), and common design colours (orange, purple, pink). 2. Select Colour 2 from the same preset options. The calculator will blend these two colours together. 3. Adjust the mix ratio slider. At 0%, the result is 100% Colour 2. At 50%, you get an equal blend. At 100%, the result is 100% Colour 1. Sliding between these extremes lets you fine-tune the exact shade you want. 4. View the result in both hex and RGB formats, ready to copy into your CSS, design tool, or colour specification. 5. Check the additional outputs: brightness tells you whether the colour is light or dark, the recommended text colour (black or white) ensures readability, the complementary colour is useful for contrast, and the HSL values help you understand the colour in terms of hue, saturation, and lightness.
The colour mixing formula blends each RGB channel proportionally: Result R = round(R1 x ratio/100 + R2 x (1 - ratio/100)) Result G = round(G1 x ratio/100 + G2 x (1 - ratio/100)) Result B = round(B1 x ratio/100 + B2 x (1 - ratio/100)) For example, mixing red (#FF0000) and blue (#0000FF) at 50%: R = round(255 x 0.5 + 0 x 0.5) = 128, G = 0, B = round(0 x 0.5 + 255 x 0.5) = 128. Result: #800080 (purple). Brightness is calculated using the perceived luminance formula: brightness = 0.299R + 0.587G + 0.114B. This weights green heavily because the human eye is most sensitive to green light. If brightness exceeds 128, black text is recommended; otherwise, white text provides better contrast. The complementary colour inverts each channel: comp = 255 - channel value. For purple (#800080), the complementary colour is #7FFF7F (light green). HSL conversion transforms RGB into hue (0-360 degrees on the colour wheel), saturation (0-100% colour intensity), and lightness (0-100% from black to white).
When designing for the web, ensure sufficient colour contrast for accessibility. The Web Content Accessibility Guidelines (WCAG) 2.1, which are referenced in UK public sector accessibility regulations, require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Tools like the WebAIM Contrast Checker can verify your colour combinations meet these standards.