Tile the chessboard with four-colored triominoes
JavaScript (ES6), &nbsp;184 ... 171&nbsp; 163 bytes

Takes input as (x)(y), with \$0\leq x\leq7\$ and \$0\leq y\leq7\$. Outputs as a string with 3 colors (marked as \$0\$, \$1\$ and \$2\$).



h=&gt;v=&gt;(a=[...'3232132031021010'],a[5+(v&amp;4|h&gt;3)]^=3,a[v/2&lt;&lt;2|h/2]=v%2*2+h%2,g=x=&gt;y&amp;8?'':(x&lt;8?x-h|y-v?a[y/2&lt;&lt;2|x/2]^y%2*2+x%2?(x^y)&amp;2:1:' ':`
`)+g(-~x%9||!++y))(y=0)


Try it online!

Method

We work on a matrix of \$4\times4\$ triominoes:

$$\begin{pmatrix}
t_0&amp;t_1&amp;t_2&amp;t_3\\
t_4&amp;t_5&amp;t_6&amp;t_7\\
t_8&amp;t_9&amp;t_{10}&amp;t_{11}\\
t_{12}&amp;t_{13}&amp;t_{14}&amp;t_{15}
\end{pmatrix}$$

Each triomino is one of:



The initial configuration of the matrix is as follows:

$$\begin{pmatrix}
3&amp;2&amp;3&amp;2\\
1&amp;3&amp;2&amp;0\\
3&amp;1&amp;0&amp;2\\
1&amp;0&amp;1&amp;0
\end{pmatrix}$$

We alternate the first 2 colors just like we would on any chessboard, which gives:



The next steps are:


According to the quadrant in which the hole is located, we rotate one of the 4 center triominoes (\$t_5\$, \$t_6\$, \$t_9\$ or \$t_{10}\$) by 180°.
We rotate the triomino on which the hole is located (it may be the same triomino as in step #1), so that it does not cover the hole.
We fill the holes with the 3rd color (except the 'real' hole).


For instance, assuming that the hole is located at \$(3,0)\$, this gives:



And it that case, the final matrix is:

$$\begin{pmatrix}
3&amp;\color{red}1&amp;3&amp;2\\
1&amp;\color{red}0&amp;2&amp;0\\
3&amp;1&amp;0&amp;2\\
1&amp;0&amp;1&amp;0
\end{pmatrix}$$

Commented

h =&gt; v =&gt; (                       // (h, v) = hole coordinates
  a = [...'3232132031021010'],    // a[] = flat representation of the 4x4 matrix
  a[5 + (v &amp; 4 | h &gt; 3)] ^= 3,    // first rotation, achieved by XOR'ing with 3
  a[v / 2 &lt;&lt; 2 | h / 2] =         // second rotation according to the
    v % 2 * 2 + h % 2,            // position of the hole within the triomino's square
  g = x =&gt;                        // g is a recursive function that converts the 4x4
                                  // matrix into a 8x8 ASCII art
    y &amp; 8 ?                       // if y = 8:
      ''                          //   stop recursion and return an empty string
    :                             // else:
      ( x &lt; 8 ?                   //   if this is not the end of the row:
          x - h | y - v ?         //     if this is not the position of the hole:
            a[y / 2 &lt;&lt; 2 | x / 2] //       if this part of the triomino located at this
            ^ y % 2 * 2 + x % 2 ? //       position is 'solid':
              (x ^ y) &amp; 2         //         use either color #0 or color #2
            :                     //       else:
              1                   //         use color #1
          :                       //     else:
            ' '                   //       the hole is represented with a space
        :                         //   else:
          `\n`                    //     append a linefeed
      ) + g(-~x % 9 || !++y)      //   append the result of a recursive call
)(y = 0)                          // initial call to g with x = y = 0


Graphical output

Click on the picture to set the position of the hole.



f=
h=&gt;v=&gt;(a=[...'3232132031021010'],a[5+(v&amp;4|h&gt;3)]^=3,a[v/2&lt;&lt;2|h/2]=v%2*2+h%2,g=x=&gt;y&amp;8?'':(x&lt;8?x-h|y-v?a[y/2&lt;&lt;2|x/2]^y%2*2+x%2?(x^y)&amp;2:1:' ':`
`)+g(-~x%9||!++y))(y=0)

;(u = (x, y) =&gt; { for(out = '', a = f(x)(y).split('\n'), y = 0; y &lt; 8; y++) for(x = 0; x &lt; 8; x++) out += `&lt;div class="b b${a[y][x] == ' ' ? 'H' : a[y][x]}"&gt;&lt;/div&gt;`; o.innerHTML = out; })(0, 0); o.onclick = e =&gt; u(e.clientX &gt;&gt; 4, e.clientY &gt;&gt; 4)
body { margin: 0; padding: 0; }
#o { width: 128px; height: 128px; }
.b { float: left; width: 14px; height: 14px; border: solid 1px; }
.b0 { background-color: #44f; border-color: #66f #22d #22d #66f; }
.b1 { background-color: #652e65; border-color: #874f87 #430c43 #430c43 #874f87; }
.b2 { background-color: #ffc90e; border-color: #ffeb2f #dda70c #dda70c #ffeb2f; }
.bH { border-color: #000; }
&lt;div id="o"&gt;&lt;/div&gt;