Hello!

Here’s the CSS that will work to change those colors. You can change the color names in the example below to hex codes so that you can pick whichever color you like.
 

/* Change color of inner ring*/
.report-courses-summary-legend pathpfill="#E84C3D"] {
    fill: green !important;
}
/* Change color of inner ring legend*/
.report-courses-summary-legend .legend-field1 span, .report-courses-summary-legend .legend-field1 div {
    color: green !important;
}
/* Change color of middle ring*/
.report-courses-summary-legend pathpfill="#52A1DC"] {
    fill: purple !important;
}
/* Change color of middle ring legend*/
.report-courses-summary-legend .legend-field2 span, .report-courses-summary-legend .legend-field2 div {
    color: purple !important;
}
/* Change color of outer ring*/
.report-courses-summary-legend pathpfill="#0465AC"] {
    fill: blue !important;
}
/* Change color of outer ring legend*/
.report-courses-summary-legend .legend-field3 span, .report-courses-summary-legend .legend-field3 div {
    color: blue !important;
}

Shout out to @nick.tosto for his help here.

Those donuts are going to look even tastier once they have some fresh new colored icing  

@Richard thanks for the question, and thanks @pmo and @nick.tosto for sharing the code! I learned something new with this post today as well.

Excellent, thanks @Adam Ballhaussen, @nick.tosto and @pmo !

Great post, thanks! 

In addition to the code above, if you’d like to hide parts of the donut ring you can with CSS. Below shows an example of hiding the outer ring. The code is split into two parts as the blue and grey parts of the ring are separate items:

/*outer ring*/

.report-courses-summary-legend .donutContainer svg g g:last-child path:first-child{
display: none;
}

.report-courses-summary-legend .donutContainer svg g g:nth-child(3) > path:nth-child(2){
    display: none;
}