Код:

const hasServicePmNotificationScript = !!document.querySelector(`script[src^="${ScriptsURL}/pm_notify/"]`);

[html]<style>
h1 {display: block;}
#pallets-container textarea {
    width: 100%;
    height: 9em;
}
.combinations {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 8px;
}
.example{
    padding: 0.5em;
}
.colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
</style>
<form id="colors-array-form">
<div id="pallets-container">
</div>
</form>

<script>(() => {
const initialPallets = [
{header: 'Палитра светлая', colors: [
{color:'#f7e2d2', name:'punbb-color'},
{color: '#aea0a0', name: 'body-color'},
{color: '#15191c', name: 'text-color'},
{color: '#576072', name: 'soft-text-color'},
{color: '#ad6648', name: 'accent-color'},
]},
{header: 'Палитра темная', colors: [
{color:'#5e5853', name:'punbb-color'},
{color: '#2e2828', name: 'body-color'},
{color: '#cfe1ef', name: 'text-color'},
{color: '#9faecd', name: 'soft-text-color'},
{color: '#ad6648', name: 'accent-color'},
]},
];
const palletsContainer = document.querySelector("#pallets-container");
const form = document.querySelector("#colors-array-form");

const getColorKeysByPalletIndex = (index) => [...(new FormData(form)).keys()].filter((key) => key.startsWith(`pallet-${index}`));

const refreshPalletCode = (palletIndex) => {
    const colorKeys = getColorKeysByPalletIndex(palletIndex);
    const variablesElement = document.querySelector(`#pallet-${palletIndex}-variables`);
    const variablesContent = colorKeys.map((key) => ['--' + form.querySelector(`#${key}`).labels[0].innerText, document.documentElement.style.getPropertyValue(`--${key}`)].join(': ') + ';').join('\n');
    variablesElement.value = `:root\{
${variablesContent }
\}`;
};

form.addEventListener('input', (e) => {
    document.documentElement.style.setProperty(`--${e.target.id}`, e.target.value);
    const palletIndex = +e.target.id.split('-')[1];
    refreshPalletCode(palletIndex);
});

if (!form || !palletsContainer) return;

const refreshPalletExamples = (palletIndex) => {
    const colorKeys = getColorKeysByPalletIndex(palletIndex);

    const combinations = document.querySelector(`#pallet-${palletIndex}-combinations`);
    combinations.replaceChildren();
    const styleMarkup = colorKeys.map((colorKey) => `
.${colorKey}-bg{background: var(--${colorKey});}
.${colorKey}-c{color: var(--${colorKey});}
`).join('');
    combinations.insertAdjacentHTML('afterbegin', `<style>${styleMarkup}</style>`);

    refreshPalletCode(palletIndex);

    colorKeys.forEach((bgColorPrefix, bgIndex) => {
        colorKeys.forEach((colorPrefix, index) => {
            if (index === bgIndex) {return;}
            combinations.insertAdjacentHTML('beforeend', `
<div class="${bgColorPrefix}-bg ${colorPrefix}-c example">Пример текста</div>
<div>Пример текста цвета <span class="highlight-text">${form.querySelector(`#${colorPrefix}`).labels[0].innerText}</span> на фоне цвета <span class="highlight-text">${form.querySelector(`#${bgColorPrefix}`).labels[0].innerText}</span></div>
`);
        });
    });
};

const createColor = (colorObject, colorIndex, palletIndex, palletContainer) => {
    const field = `pallet-${palletIndex}-color-${colorIndex}`;
    const {color, name = `color-${colorIndex}`} = (colorObject ? colorObject : {});
    document.documentElement.style.setProperty(`--${field}`, color);
    const wrapper = document.createElement('div');

    const label = document.createElement('label');
    label.htmlFor = field;
    label.innerText = name;
    wrapper.append(label);

    const input = document.createElement('input');
    input.type = 'color';
    input.name = field;
    input.value = color;
    input.id = field;
    wrapper.append(input);

    const remover = document.createElement('button');
    remover.innerText = 'x';
    remover.addEventListener('click', (e) => {
        e.preventDefault();
        wrapper.remove();
        refreshPalletExamples(palletIndex);
    });
    wrapper.append(remover);
    palletContainer.append(wrapper);
};

const createPallet = (pallet, index) => {
    const {header='Палитра', colors=[]} = (pallet ? pallet : {});
    const wrapper = document.createElement('div');

    const palletHeader = document.createElement('h2');
    palletHeader.innerText = header;
    wrapper.append(palletHeader);

    const colorsContainer = document.createElement('div');
    colorsContainer.id = `pallet-${index}-colors`;
    colorsContainer.classList.add('colors');

    const addColorButton = document.createElement('button');
    addColorButton.innerText = 'Добавить цвет в палитру';
    addColorButton.addEventListener('click', (e) => {
        e.preventDefault();
        const colorsKeys = getColorKeysByPalletIndex(index);
        const indicies = colorsKeys.map((key) => +key.split('-').at(-1));
        const nextColorIndex = Math.max(...indicies) + 1;
        createColor({color: '#000000'}, nextColorIndex, index, colorsContainer);
        refreshPalletExamples(index);
    });
    wrapper.append(addColorButton);

    wrapper.append(colorsContainer);

    const colorsCode = document.createElement('textarea');
    colorsCode.id = `pallet-${index}-variables`;
    wrapper.append(colorsCode);
    const combinationsContainer = document.createElement('div');
    combinationsContainer.classList.add('combinations');
    combinationsContainer.id = `pallet-${index}-combinations`;
    wrapper.append(combinationsContainer);

    colors.forEach((color, colorIndex) => createColor(color, colorIndex, index, colorsContainer));
    palletsContainer.append(wrapper);
    refreshPalletExamples(index);
};

const init = (pallets) => {
pallets.forEach(createPallet);
};

init(initialPallets);
})()
</script>[/html]

Если есть желание стащить к себе

Код:

<style>
h1 {display: block;}
#pallets-container textarea {
    width: 100%;
    height: 9em;
}
.combinations {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 8px;
}
.example{
    padding: 0.5em;
}
.colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
</style>
<form id="colors-array-form">
<div id="pallets-container">
</div>
</form>

<script>(() => {
const initialPallets = [
{header: 'Палитра светлая', colors: [
{color:'#f7e2d2', name:'punbb-color'},
{color: '#aea0a0', name: 'body-color'},
{color: '#15191c', name: 'text-color'},
{color: '#576072', name: 'soft-text-color'},
{color: '#ad6648', name: 'accent-color'},
]},
{header: 'Палитра темная', colors: [
{color:'#5e5853', name:'punbb-color'},
{color: '#2e2828', name: 'body-color'},
{color: '#cfe1ef', name: 'text-color'},
{color: '#9faecd', name: 'soft-text-color'},
{color: '#ad6648', name: 'accent-color'},
]},
];
const palletsContainer = document.querySelector("#pallets-container");
const form = document.querySelector("#colors-array-form");

const getColorKeysByPalletIndex = (index) => [...(new FormData(form)).keys()].filter((key) => key.startsWith(`pallet-${index}`));

const refreshPalletCode = (palletIndex) => {
    const colorKeys = getColorKeysByPalletIndex(palletIndex);
    const variablesElement = document.querySelector(`#pallet-${palletIndex}-variables`);
    const variablesContent = colorKeys.map((key) => ['--' + form.querySelector(`#${key}`).labels[0].innerText, document.documentElement.style.getPropertyValue(`--${key}`)].join(': ') + ';').join('\n');
    variablesElement.value = `:root\{
${variablesContent }
\}`;
};

form.addEventListener('input', (e) => {
    document.documentElement.style.setProperty(`--${e.target.id}`, e.target.value);
    const palletIndex = +e.target.id.split('-')[1];
    refreshPalletCode(palletIndex);
});

if (!form || !palletsContainer) return;

const refreshPalletExamples = (palletIndex) => {
    const colorKeys = getColorKeysByPalletIndex(palletIndex);

    const combinations = document.querySelector(`#pallet-${palletIndex}-combinations`);
    combinations.replaceChildren();
    const styleMarkup = colorKeys.map((colorKey) => `
.${colorKey}-bg{background: var(--${colorKey});}
.${colorKey}-c{color: var(--${colorKey});}
`).join('');
    combinations.insertAdjacentHTML('afterbegin', `<style>${styleMarkup}</style>`);

    refreshPalletCode(palletIndex);

    colorKeys.forEach((bgColorPrefix, bgIndex) => {
        colorKeys.forEach((colorPrefix, index) => {
            if (index === bgIndex) {return;}
            combinations.insertAdjacentHTML('beforeend', `
<div class="${bgColorPrefix}-bg ${colorPrefix}-c example">Пример текста</div>
<div>Пример текста цвета <span class="highlight-text">${form.querySelector(`#${colorPrefix}`).labels[0].innerText}</span> на фоне цвета <span class="highlight-text">${form.querySelector(`#${bgColorPrefix}`).labels[0].innerText}</span></div>
`);
        });
    });
};

const createColor = (colorObject, colorIndex, palletIndex, palletContainer) => {
    const field = `pallet-${palletIndex}-color-${colorIndex}`;
    const {color, name = `color-${colorIndex}`} = (colorObject ? colorObject : {});
    document.documentElement.style.setProperty(`--${field}`, color);
    const wrapper = document.createElement('div');

    const label = document.createElement('label');
    label.htmlFor = field;
    label.innerText = name;
    wrapper.append(label);

    const input = document.createElement('input');
    input.type = 'color';
    input.name = field;
    input.value = color;
    input.id = field;
    wrapper.append(input);

    const remover = document.createElement('button');
    remover.innerText = 'x';
    remover.addEventListener('click', (e) => {
        e.preventDefault();
        wrapper.remove();
        refreshPalletExamples(palletIndex);
    });
    wrapper.append(remover);
    palletContainer.append(wrapper);
};

const createPallet = (pallet, index) => {
    const {header='Палитра', colors=[]} = (pallet ? pallet : {});
    const wrapper = document.createElement('div');

    const palletHeader = document.createElement('h2');
    palletHeader.innerText = header;
    wrapper.append(palletHeader);

    const colorsContainer = document.createElement('div');
    colorsContainer.id = `pallet-${index}-colors`;
    colorsContainer.classList.add('colors');

    const addColorButton = document.createElement('button');
    addColorButton.innerText = 'Добавить цвет в палитру';
    addColorButton.addEventListener('click', (e) => {
        e.preventDefault();
        const colorsKeys = getColorKeysByPalletIndex(index);
        const indicies = colorsKeys.map((key) => +key.split('-').at(-1));
        const nextColorIndex = Math.max(...indicies) + 1;
        createColor({color: '#000000'}, nextColorIndex, index, colorsContainer);
        refreshPalletExamples(index);
    });
    wrapper.append(addColorButton);

    wrapper.append(colorsContainer);

    const colorsCode = document.createElement('textarea');
    colorsCode.id = `pallet-${index}-variables`;
    wrapper.append(colorsCode);
    const combinationsContainer = document.createElement('div');
    combinationsContainer.classList.add('combinations');
    combinationsContainer.id = `pallet-${index}-combinations`;
    wrapper.append(combinationsContainer);

    colors.forEach((color, colorIndex) => createColor(color, colorIndex, index, colorsContainer));
    palletsContainer.append(wrapper);
    refreshPalletExamples(index);
};

const init = (pallets) => {
pallets.forEach(createPallet);
};

init(initialPallets);
})()
</script>

Вот такая дичь получится, с точностью до иконок

С кнопками сами чето придумайте, их id если что - #button-spanWithBg и #button-blockWithBg
В вверх

Код:

<script>
    const showOrCreateColorPicker = (tag, valuePrefix) => {
        const pickerCandidate = document.querySelector(`[data-tag=${tag}]`);
        const picker = pickerCandidate ? pickerCandidate : document.createElement('div');
        picker.style.display = picker.style.display === 'block' ? 'none' : 'block';

        if (picker.parentElement) {
            return;
        }

        picker.dataset.tag = tag;
        picker.classList.add('container');
        document.querySelector('#tags').append(picker);
        const input = document.createElement('input');
        input.type = 'color';
        picker.append(input);
        input.addEventListener('change', (e) => {
            const value = e.target.value;
            picker.style.display = 'none';
            bbcode(`[${tag}='${valuePrefix}${value}']`, `[/${tag}]`);
        })
    }
    FORUM.set('editor.spanWithBg', {name: 'Фон надписи', onclick: () => showOrCreateColorPicker('spanWithBg', "background: ")});
    FORUM.set('editor.blockWithBg', {name: 'Фон блока', onclick: () => showOrCreateColorPicker('blockWithBg', "background: ")});
</script>

В пользовательские теги

Код:

spanWithBg[span/style]:ai
blockWithBg[div/style]:a