You can use the class stretched-link as the simplest approach. Basically, this class will make any hyperlink (text, button or image link) apply to the whole column in which the link is in. It doesn’t work on rows as such, but there is a simple workaround. Set your different colour areas as separate blocs and use the background fill option to show the required colour. Add a text box into the bloc and style as required. Select any part of the text and create a hyperlink. In the interactions section, create the link to the page you want it to point at.
Ordinarily, this will create a link on the selected text only. However, if you add the class stretched-link to the text used to create the hyperlink, the whole column will become clickable. The only issue with this option is that if your block has padding, the padding area will not be clickable. To overcome this, just set the block padding to none. This will cause the row to be the same height as the bloc, thereby making the whole block into a hyperlink. If you want padding (which you probably will), create a custom class to set a top and bottom margin to the text box. It should look something like this:
Once you’ve created one bloc, just duplicate it for as many items as you need and edit the text, colour and hyperlink for each duplicated bloc.