JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colors">((A and B and (C or (D and E))) or F).</div>

JavaScript

// List of colours we'll use.
var colors = ['red', 'blue', 'purple', 'orange', 'green'];

// Define the div and it's contents
var div = document.getElementById('colors')
var string = div.innerHTML;

// A function to return a span object with coloured text.
color_span = function(color, inner) {
    return '<span style="color:' + color + '">' + inner + '</span>'
}

var color_count = 0;
var return_html = '';

// Cycle through each character in the string
for (i=0; i < string.length; i++) {
    // If it's an open bracket, add a coloured span to the return_html and increment the colour counter
    if ( string[i] == '(' ) {
        return_html += color_span(colors[color_count], string[i]);
        color_count++;
    // If close bracket add coloured span and decrement the colour counter.
    } else if ( string[i] == ')' ) {
        color_count--;
        return_html += color_span(colors[color_count], string[i]);
    // If neither just add the character.
    } else {
        return_html += string[i];
    }
}
// Change the div's html.
div.innerHTML = return_html