Color

The Color class parses colors specified as CSS strings and exposes their red, green, blue, and alpha channels as read-write properties.

It also provides fromHsb and fromHsl methods for creating colors using the HSB and HSL color models instead of RGB, as well as getHsb and getHsl methods for retrieving the color components using those color models.

The Color class also has an interpolate method that creates colors by interpolating between two colors using the HSL model. This method is especially useful for creating color animations with the animate method.

The example below illustrates:

// This file locates: "Scripts/Lesson/C1Mvc/Color.js".
c1.documentReady(function () {
    var clrStart = wijmo.Control.getControl('#clrStart');
    var clrEnd = wijmo.Control.getControl('#clrEnd');
    clrStart.valueChanged.addHandler(interpolate);
    clrEnd.valueChanged.addHandler(interpolate);
 
    interpolate();
 
    // interpolate colors
    var animInt;
    function interpolate() {
 
        // remove old gradient
        var tr = document.getElementById('theColorRow');
        while (tr.hasChildNodes()) {
            tr.removeChild(tr.lastChild);
        }
 
        // calculate new gradient
        var c1 = new wijmo.Color(clrStart.value),
            c2 = new wijmo.Color(clrEnd.value),
        cnt = 80;
        for (var i = 0; i < cnt; i++) {
            var td = document.createElement('td');
            td.innerHTML = '&nbsp;'
            td.style.background = wijmo.Color.interpolate(c1, c2, i / cnt);
            tr.appendChild(td);
        }
 
        // animate the color
        var theColor = document.getElementById('theColor');
        clearInterval(animInt);
        animInt = wijmo.animate(function (pct) {
            theColor.style.background = wijmo.Color.interpolate(c1, c2, pct);
        }, 2000);
 
    }
});

// This file locates: "Content/css/Lesson/C1Mvc/Color.css".
#theColor {
  width: 150px;
  height: 150px;
  margin: 12px auto;
  border: 2px solid black;
  background-color: grey;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: Color
        public ActionResult Color()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.Color_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.Color_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Color_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Color_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Color_Text4)
</p>
<div>
    @Html.C1().InputColor().Id("clrStart").Value(System.Drawing.Color.Purple)
    @Html.C1().InputColor().Id("clrEnd").Value(System.Drawing.Color.Red)
</div>
<table style="width:100%;margin-top:12px;">
    <tr id="theColorRow"></tr>
</table>
<div id="theColor">
    <div>
 
    </div>
</div>