pushStateをつかってURLを書き換える

pushStateをつかえば、サーバサイドに知られることなくフロントだけでURLを書き換えることができます。

JavaScript

(function(win, doc) {

    "use strict";
    
    var btnRed = doc.getElementById("red"),
        btnGreen = doc.getElementById("green"),
        btnBlue = doc.getElementById("blue");
    
    btnRed.addEventListener("click", function() {
        history.pushState({color: "red"}, "", "/kimmy/1b0F/red/");
        doc.body.style.background = "#EF9A9A";
    }, false);

    btnGreen.addEventListener("click", function() {
        history.pushState({color: "green"}, "", "/kimmy/1b0F/green/");
        doc.body.style.background = "#A5D6A7";
    }, false);

    btnBlue.addEventListener("click", function() {
        history.pushState({color: "blue"}, "", "/kimmy/1b0F/blue/");
        doc.body.style.background = "#81D4FA";
    }, false);
    
    win.addEventListener("popstate", function(evt) {
        if (evt.state) {
            switch (evt.state.color) {
                case "red":
                    doc.body.style.background = "#EF9A9A";
                    break;
                case "green":
                    doc.body.style.background = "#A5D6A7";
                    break;
                case "blue":
                    doc.body.style.background = "#81D4FA";
                    break;
            }
        } else {
            doc.body.style.background = "#ececec";
        }
    });
    
})(this, document);

DEMO

http://jsrun.it/kimmy/1b0F/

ただし、実際にURLは用意していないので、
例えば、 http://jsrun.it/kimmy/1b0F/red/ とかに直接アクセスすると404が返ってきてしまいます。リロードも同様です。

実際につかう際にはサーバサイドエンジニアと連携してなんとかしておきましょう。