<!DOCTYPE html>

<!-- ALL YOU NEED IS HUE ROTATION -->
<style type="text/css" media="screen">
    .colors {
        filter: hue-rotate(12deg);
    }

    .colors td {
        filter: hue-rotate(179deg);
    }
</style>







<style type="text/css" media="screen">
    body {
        display: flex;
        padding: 0;
        margin: 0;
        height: 100vh;
        background-color: #fff;
        font-family: monospace;
        font-weight: bold;
        font-size: 5vh;
    }

    .main {
        margin: auto;
        width: 95vh;
        height: 95vh;
        position: relative;
    }

    table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
    }

    td {
        text-align: center;
        vertical-align: middle;
    }

    td > div {
        margin: 1vh;
    }

    .symbols {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<body>

<script>
    function SeedRandom(state1, state2){
        const mod1 = 4294967087, mul1 = 65539, mod2 = 4294965887, mul2=65537;

        state1 = state1 % (mod1 - 1) + 1;
        state2 = state2 % (mod2 - 1) + 1;

        function random(limit) {
            state1 = (state1 * mul1) % mod1;
            state2 = (state2 * mul2) % mod2;
            return state1 < limit && state2 < limit && state1 < mod1 % limit && state2 < mod2 % limit
                ? random(limit)
                : (state1 + state2) % limit;
        }

        return random;
    }

    const rand = SeedRandom(42, 42);

    const d = document.createElement('div');
    d.className = 'main';
    document.body.appendChild(d);

    const N = 11;

    function f(x, y) {
        return (N * 6) + (N << 4) * (y <= (N + 1) / 2 ? f1(y) === x : f1(x + N - 2) === y);
    }

    function f1(x) { return Math.round(x / 2) }

    const COLORS = ['ff4d4d', 'e09d00', 'ffe45c', '009436', '60c9af', '0050dc', '662cdb'];
    const COLORS_I_J = [];
    function color(i, j) {
        const ci = COLORS_I_J[i] || (COLORS_I_J[i] = []);
        return ci[j] || (ci[j] = COLORS[rand(7)]);
    }

    d.appendChild((() => {
        const t = document.createElement('table');
        t.className = 'colors';
        let i = N;
        while(i--) {
            const r = document.createElement('tr');
            let j = N;
            while(j--) {
                const c = document.createElement('td');
                c.style.backgroundColor = `#${color(i, j)}`;
                //c.style.filter = 'hue-rotate(48deg)';
                r.appendChild(c);
            }
            t.appendChild(r);
        }
        return t;
    })());

    d.appendChild((() => {
        const SYMBOLS = Array(12).fill('{flag_flag}');
        const t = document.createElement('table');
        t.className = 'symbols';
        let i = N;
        while(i--) {
            const r = document.createElement('tr');
            let j = N;
            while(j--) {
                const c = document.createElement('td');
                c.innerHTML = `<div style="color: #${color(i, j)}; filter: hue-rotate(${f(N - i - 1, N - j - 1)}deg)">${SYMBOLS[10 - i][10 - j]}</div>`;
                r.appendChild(c);
            }
            t.appendChild(r);
        }
        return t;
    })());
</script>

</body>