CodePen Embed - Paint-By-Numbers

<form>
  <fieldset class="colors"><label><input type="radio" name="color" data-color="1" value="c1" style="--bg:#FFE92E;" checked=""></label><label><input type="radio" name="color" data-color="2" value="c2" style="--bg:#42B6F5;"></label><label><input type="radio" name="color" data-color="3" value="c3" style="--bg:#FFFFFF;"></label><label><input type="radio" name="color" data-color="4" value="c4" style="--bg:#000000;"></label><label><input type="radio" name="color" data-color="5" value="c5" style="--bg:#FDB50D;"></label><label><input type="radio" name="color" data-color="6" value="c6" style="--bg:#1E80F0;"></label></fieldset>
  <fieldset id="app" class="grid"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="4" name="c4" style="--bg:#000000;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="4" name="c4" style="--bg:#000000;"><input type="checkbox" data-color="3" name="c3" style="--bg:#FFFFFF;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="5" name="c5" style="--bg:#FDB50D;"><input type="checkbox" data-color="5" name="c5" style="--bg:#FDB50D;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="2" name="c2" style="--bg:#42B6F5;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="1" name="c1" style="--bg:#FFE92E;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"><input type="checkbox" data-color="6" name="c6" style="--bg:#1E80F0;"></fieldset>
</form>

<p>
  <small>Image Credit: https://www.pixilart.com/art/quack-sr273889da30c0</small>
</p>

.colors,
.grid {
  all: unset;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(12, 1fr);
}
:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  aspect-ratio: 1;
  display: grid;
  border-radius: 0;
  margin: 0;
  place-content: center; 
  width: 100%;
  &::after {
    color: #999;
    content: attr(data-color);
    display: block;
    font-size: 150%;
  }
}
[type="checkbox"] {
  background: #EEE;
  pointer-events: none;
  &:checked {
    background: var(--bg);
    &::after { opacity: 0; }
  }
}
[type="radio"] {
  background: var(--bg);
  &::after {
    aspect-ratio: 1;
    background-color: rgba(0,0,0,.1);
    border-radius: 50%;
    color: rgba(255, 255, 255,.5);
    display: grid;
    place-content: center;
    width: 3ch;
  }
  &:checked {
    box-shadow: inset 0 0 0 2px #222;
    &::after {
      background-color: #222;
      color: #FFF;
    }
  }
}

.colors { gap: 6px; margin-block: 8px; }

form :has([value="c1"]:checked) ~ .grid [name="c1"],
form :has([value="c2"]:checked) ~ .grid [name="c2"],
form :has([value="c3"]:checked) ~ .grid [name="c3"],
form :has([value="c4"]:checked) ~ .grid [name="c4"],
form :has([value="c5"]:checked) ~ .grid [name="c5"],
form :has([value="c6"]:checked) ~ .grid [name="c6"] { pointer-events: all;	}

body { font-family: ui-sans-serif, system-ui, sans-serif; }
small { color: #999; }

/*
JS NOT NEEDED, BUT IF YOU WANT TO FIDDLE WITH THIS,
I USED THE JS BELOW TO RENDER THE HTML:

const colors = [
  '#FFE92E',
  '#42B6F5',
  '#FFFFFF',
  '#000000',
  '#FDB50D',
  '#1E80F0',
];
const canvas = [
  1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 2, 2, 1, 2,
  3, 2, 2, 2, 2, 3, 3, 3, 3, 2, 2, 3, 3, 3, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 4, 1, 1, 4, 3, 2, 2, 2, 2, 2, 2, 1, 1, 5,
  5, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1,
  1, 2, 2, 2, 6, 6, 6, 1, 1, 1, 1, 1, 1, 6, 6, 6, 6, 6, 6, 6, 1, 1, 1, 1, 6, 6,
  6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6,
];
const color = document.querySelector('.colors');
const grid = document.querySelector('.grid');

color.innerHTML = colors
  .map(
    (c, i) =>
      `<input type="radio" name="color" data-color="${i + 1}" value="c${
        i + 1
      }" style="--bg:${c};"${i === 0 ? ` checked` : ''}>`,
  )
  .join('');
grid.innerHTML = canvas
  .map(
    (c) =>
      `<input type="checkbox" data-color="${c}" name="c${c}" style="--bg:${
        colors[c - 1]
      };">`,
  )
  .join('');
*/

This Pen is owned by Mads Stoumann on CodePen.

See more by @stoumann on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.