Task:

Consider the problem: "given a chessboard with one square missing, cut it into 21 L-triominoes". There is a well-known constructive proof that this can be done for any square chessboard size that is a power of two. It works by splitting the chessboard into a smaller chessboard with the hole in it and one big triomino and then observing that that triomino can be cut into four triominoes recursively.

In this task, you are required to cut an 8x8 chessboard into L-shaped triominoes and then to color them with four colors such that no two adjacent triominoes have the same color.

Specification:

Your input is the position of the hole, given as a pair of integers. You may choose which one is the column index and which one is the row index. You may choose if each starts at 0 or at 1 and away from which corner they increase. You may require A..H as the first coordinate instead of 0..7 or 1..8. You may also accept both coordinates packed into a single integer 0..63 or 1..64 in lexicographical order (row-major or column-major, left to right or right to left, up to down or down to up). You may write a full program, or a function.

You may output the tiling as ASCII, as colored ASCII or as graphical primitives. If you choose ASCII output, you may choose any four printable ASCII characters to represent the four colors. If you choose colored ASCII, you may choose any four printable ASCII characters or just one character other than space. The hole must be represented by the space character. If one of your characters is the space character, no triomino adjacent to the hole or at the chessboard edge may be of this color.

If you choose colored ASCII or graphical output, you may choose any four colors out of #000, #00F, #0F0, #0FF, #F00, #F0F, #FF0, #FFF or their closest equivalents available in your environment. If you choose graphical output, your graphical primitives must be filled squares at least 32x32 pixels in size and separated by no more than two pixels of other color. If the above exceeds the screen resolution of your environment, the minimum size requirement is relaxed to the largest square size that still fits on the screen.

You may choose any valid tiling of the given chessboard. You may choose any four-coloring of the tiling you choose. Your choice of four colors must be the same across all outputs, but you aren't required to use every color in every output.

Examples:

Possible output for input = [0, 0] (top left corner)

 #??##??
##.?#..?
?..#??.#
??##.?##
##?..#??
#.??##.?
?..#?..#
??##??##

Another possible output of the same program (input = [0, 7]):

??#??#?
?##?##??
..xx..xx
.?x#.?x#
??##??##
..xx..xx
.?x#.?x#
??##??##

A different program may also produce, for the input of "D1" (note the nonstandard but allowed chessboard orientation),

AABBCCAA
ACBACBAC
CCAABBCC
 ABBAADD
AABDABDC
BBDDBBCC
BABBACAA
AABAACCA

JavaScript (ES6),  184 180 179 173  171 bytes

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

h=>v=>(a=[...'3232132031021010'],a[5+(v&4|h>3)]^=3,a[v/2<<2|h/2]=v%2*2+h%2,g=x=>y&8?'':(x<8?x-h|y-v?a[(Y=y>>1)*4|(X=x/2)]^y%2*2+x%2?X+Y&1:2:' ':(x=~!++y,`
`))+g(x+1))(y=0)

Try it online!

Method

We work on a matrix of $4times4$ triominoes.

$$beginpmatrix
t_0&t_1&t_2&t_3\
t_4&t_5&t_6&t_7\
t_8&t_9&t_10&t_11\
t_12&t_13&t_14&t_15
endpmatrix$$

Each triomino may be one of:

The initial configuration of the matrix is as follows:

$$beginpmatrix
3&2&3&2\
1&3&2&0\
3&1&0&2\
1&0&1&0
endpmatrix$$

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

The next steps are:

1. 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°.


2. 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.


3. We fill the holes with the 3rd color (except the 'real' hole).

Assuming that the hole is located at $(2,0)$, this gives:

Graphical output

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

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

;(u = (x, y) => for(out = '', a = f(x)(y).split('n'), y = 0; y < 8; y++) for(x = 0; x < 8; x++) out += `<div class="b b$a[y][x] == ' ' ? 'H' : a[y][x]"></div>`; o.innerHTML = out; )(0, 0); o.onclick = e => u(e.clientX >> 4, e.clientY >> 4)

body margin: 0; padding: 0; 
#o width: 128px; height: 128px; 
.b float: left; width: 16px; height: 16px; 
.b0 background-color: #44f; 
.b1 background-color: #ffc90e; 
.b2 background-color: #22b14c; 
.bH background-color: #000; 

<div id="o"></div>