Purpose:
Gives the user the ability to mix two colors together.

Parameters:

Returns:
Returns a new color, a specified percentage closer to white.

Example #1:
The following code will create a random color in the left cell below the code.  After that, it will create a lighter version of that color in the cell to the right of it:

// Show a randomly generated color. var c1 = Color.random(); with($("#tblEx1 TR:element(last) TD:element(1)")) { setCSS("background-color", c1); setCSS("border", "1px solid " + c1.toGrayscale()); setCSS("color", c1.getSafeColor()); setText("Color 1: " + c1); } // Show another randomly generated color. var c2 = Color.random(); with($("#tblEx1 TR:element(last) TD:element(2)")) { setCSS("background-color", c2); setCSS("border", "1px solid " + c2.toGrayscale()); setCSS("color", c2.getSafeColor()); setText("Color 2: " + c2); } // Show a 50-50 mix of the two colors. var c3 = c1.combine(c2); with($("#tblEx1 TR:element(last) TD:element(3)")) { setCSS("background-color", c3); setCSS("border", "1px solid " + c3.toGrayscale()); setCSS("color", c3.getSafeColor()); setText("Mixed Color: " + c3); }

Example #2:
The following will create two random colors and will display the result of mixing them in intervals of 25% strength:

// Show a randomly generated color. var c1 = Color.random(); with($("#tblEx2 TR:element(3) TD:element(1)")) { setCSS("background-color", c1); setCSS("border", "1px solid " + c1.toGrayscale()); setCSS("color", c1.getSafeColor()); setText("Color 1: " + c1); } // Show another randomly generated color. var c2 = Color.random(); with($("#tblEx2 TR:element(3) TD:element(3)")) { setCSS("background-color", c2); setCSS("border", "1px solid " + c2.toGrayscale()); setCSS("color", c2.getSafeColor()); setText("Color 2: " + c2); } // Show a 50-50 mix of the two colors. var c3 = c1.combine(c2, 50); with($("#tblEx2 TR:element(3) TD:element(2)")) { setCSS("background-color", c3); setCSS("border", "1px solid " + c3.toGrayscale()); setCSS("color", c3.getSafeColor()); setText("50-50 Mix: " + c3); } // Show a 75-25 mix of the two colors. var c4 = c1.combine(c2, 25); with($("#tblEx2 TR:element(4) TD:element(1)")) { setCSS("background-color", c4); setCSS("border", "1px solid " + c4.toGrayscale()); setCSS("color", c4.getSafeColor()); setText("75-25 Mix: " + c4); } // Show a 25-75 mix of the two colors. var c5 = c1.combine(c2, 75); with($("#tblEx2 TR:element(4) TD:element(2)")) { setCSS("background-color", c5); setCSS("border", "1px solid " + c5.toGrayscale()); setCSS("color", c5.getSafeColor()); setText("25-75 Mix: " + c5); }

See also:

• new Color(hexColor)
• new Color(rgbColor)
• new Color(redValue, greenValue, blueValue)
• Color.combine(...)
• Color.getDarker(...)
• Color.getHexCode()
• Color.getLuminance()
• Color.getOpposite()
• Color.getSafeColor()
• Color.setColor(...)
• Color.toGrayscale()
• Color.toString()