Those colors were poorly chosen. Going through the accessibility checker in the browser's dev tools, at least two of the 3 colored buttons are always indistinguishable.

For anyone who needs it:

The bottom row has two buttons that are 1.5 times standard width keys, the left is mauve (light pinkish-purple), the right is a minty-green.

The second bottom row has five standard keys but the far left one is unlabelled and coloured light-blue.

Each labelled key has 6 symbols in a 2x3 layout.

By default, pressing a key will type the symbol in the top row and left column.

Holding the mauve key when typing will change all keys to use the centre row.

Holding the minty-green key when typing will change all keys to use the bottom row.

Holding the light-blue key when typing will change all keys to use the right column.

So any combination of no-modifiers, right-column, middle-row, or bottom-row modifier keys when pressing a key can select any symbol on the keyboard.

I have no idea what happens when pressing a key while holding both the middle-row and bottom-row modifiers at the same time.

Those modifier keys definitely should have had symbols on them showing which row/column they modify.