Color Clues Multiplayer Game


Color Clues: Multiplayer Online Board Game with Django Channels


Color Clues is a real-time multiplayer adaptation of the popular board game Hues and Cues. Inspired by the premise of Hues and Cues, players take turns giving abstract clues about a chosen color while others guess from a color grid. Points are awarded based on the accuracy of guesses, adding an element of strategy and competition to the game.

This project served as my introduction to developing real-time multiplayer online games using Django Channels. I gained hands-on experience in sending and receiving data between the consumer and the frontend, a process that proved to be both challenging and rewarding. While the project is still a work in progress, I have made significant strides in refining the user interface and game mechanics.

To kickstart my journey into Django Channels, I followed this tutorial which provided a solid foundation for further development and experimentation.

Color Clues is now available to play on my website!

play game

source code


Log in to game room


As the clue giver, select which color to give clues on


Clue-giver page after players guessed one


Points awarded to players


One of the first hurdles that I faced when creating this game was developing my own adaptation of the board game. Rather than hard-coding 480 color tiles, I used a simple nested loop:

const colorGrid = document.getElementById("color-grid");

for (let i = 0; i < 17; i++) {
    const row = document.createElement("div");
    row.className = "color-row";

    for (let j = 0; j < 31; j++) {
        const col = document.createElement("div");
        col.className = "color-col";
        col.setAttribute("data-row", i);
        col.setAttribute("data-col", j);
        if (i === 0) {
   = `black`;
   = 'white';
   = 'center';
            if (j !== 0) {
                col.textContent = j.toString();
            col.className = "grid-col";
        } else if (j === 0) {
   = `black`;
   = 'white';
   = 'center';
            col.textContent = String.fromCharCode(i + 64);
            col.className = "grid-col";
        } else {
            const hue = Math.round(j * 12);
            const saturation = 100
            const lightness = 15 + Math.round(i * 5);
   = `hsl(${hue}, ${saturation}%, ${lightness}%)`;


As we can see, I simply changed the background color of each tile square by calculating the hue of the color from the row value (j) and the lightness of the color from the column value (i).