Demo

• canvasをサポートしてるブラウザーで動きます。IE9もOK(ただしスライダーが出ない)
• クリックしてアニメ
• スライダーで「ページめくり」
• スライダーはinput[type=range]で実装しているので、未実装のブラウザーだときちんと出ません(主にFirefoxとIE)。手抜き失礼

iPhone 5の新"Retina Long"ディスプレイではsRGB全て発色できるとのことなので、これでご確認を。

Dan the Colorful JavaScriper

Demo Source

HTML

JavaScript

(function (global) {
    'use strict';
    var $ = function (id) {
        return document.getElementById(id)
    };
    /* RGB */
    var rgb = $('rgbcube'),
        blue = $('blue'),
        rgbinfo = $('rgbinfo');
    var rgbdraw = function (b) {
        var ctx = rgb.getContext("2d"),
            imgdata = ctx.createImageData(256, 256),
            data = imgdata.data,
            pxl = 0;
        for (var g = 0; g < 256; g++) {
            for (var r = 0; r < 256; r++) {
                data[pxl] = r;
                data[pxl + 1] = g;
                data[pxl + 2] = b;
                data[pxl + 3] = 255;
                pxl += 4;
            }
        }
        ctx.putImageData(imgdata, 0, 0);
        blue.value = b;
        rgbinfo.innerHTML = 'B = ' + b;
    };
    rgb.addEventListener('click', function () {
        var b = 0,
            started = Date.now();
        setTimeout(function animate() {
            rgbdraw(b);
            if (++b < 256) setTimeout(animate, 0);
            else rgbinfo.innerHTML = 256 / (Date.now() - started) * 1e3 + 'fps';
        }, 0);
    }, false);
    blue.addEventListener('change', function () {
        rgbdraw(this.value * 1);
    }, false);
    rgbdraw(0);
    /* YCbCr */
    var ycbcr = $('ycbcrcube'),
        luma = $('luma'),
        ycbcrinfo = $('ycbcrinfo');
    var ycbcrdraw = function (y) {
        var ctx = ycbcr.getContext("2d"),
            imgdata = ctx.createImageData(256, 256),
            data = imgdata.data,
            pxl = 0;
        for (var cb = -128; cb < 128; cb++) {
            for (var cr = -128; cr < 128; cr++) {
                data[pxl] = y + 1.40200 * cr;
                data[pxl + 1] = y - 0.34414 * cb - 0.71414 * cr;
                data[pxl + 2] = y + 1.77200 * cb;
                data[pxl + 3] = 255;
                pxl += 4;
            }
        }
        ctx.putImageData(imgdata, 0, 0);
        luma.value = y;
        ycbcrinfo.innerHTML = 'Y = ' + y;
    };
    ycbcr.addEventListener('click', function () {
        var y = 0,
            started = Date.now();
        setTimeout(function animate() {
            ycbcrdraw(y);
            if (++y < 256) setTimeout(animate, 0);
            else ycbcrinfo.innerHTML = 256 / (Date.now() - started) * 1e3 + 'fps';
        }, 0);
    }, false);
    luma.addEventListener('change', function () {
        ycbcrdraw(this.value * 1);
    }, false);
    ycbcrdraw(0);
})(this);