Here is a slution worked out by our member @pupsik about how you can have some text color option within the forums editor.

Tutorial starts here:

Please note, this is pupsik`s edit and it works, it might not be the best solution or someone might did it different. The pictures he used are original MarkitUp images to fit the style. You may use any others.

Open: sites/default/assets/js/editor.js

Find:

{name: 'Headers', className: "heading", dropMenu: [
Replace with:

{separator:'---------------' },
      {name:'Colors', className: "colors", key: 'C', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
      {name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
      {name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
      {name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
      {name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
      {name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
      {name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
      {name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
      {name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
      {name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
  ]},


  {name: 'Headers', className: "fonts", dropMenu: [

Open: sites/default/themes/default/less/editor.less

Find:

.markItUp .markItUpButton9 a    {
    background-image:url(../img/smileyimg.png);
}
Add after:

.markItUp .colors {
   left: 300px;
   position: absolute;
}

.markItUpHeader .colors ul{
    top: 23px;
    z-index:300;
}

.markItUpHeader .markItUpButton11 a {
    background-image:url(../img/colors.png);
    top: 23px;
    z-index:300;
}

    .markItUpHeader .markItUpButton11 ul {
        width:81px;
        padding:1px;

    }
    .markItUpHeader .markItUpButton11  li {
        border:1px solid white;
        width:25px;    height:25px;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;    
    }

    .markItUpHeader .markItUpButton11 ul a {
        width:25px;    height:25px;
    }

    .markItUpHeader .markItUpButton11 ul a:hover {
        background-color:none;
    }

    .markItUp .markItUpButton11 .col1-1 a {
        background:yellow;
    }
    .markItUp .markItUpButton11 .col1-2 a {
        background:orange;
    }
    .markItUp .markItUpButton11 .col1-3 a {
        background:red;
    }

    .markItUp .markItUpButton11 .col2-1 a {
        background:blue;
    }
    .markItUp .markItUpButton11 .col2-2 a {
        background:purple;
    }
    .markItUp .markItUpButton11 .col2-3 a {
        background:green;
    }

    .markItUp .markItUpButton11 .col3-1 a {
        background:white;
    }
    .markItUp .markItUpButton11 .col3-2 a {
        background:gray;
    }
    .markItUp .markItUpButton11 .col3-3 a {
        background:black;
    }


.markItUp .fonts {
   left: 320px;
   position: absolute;
}

.markItUpHeader .fonts ul{
    top: 23px;
    z-index:300;
}

.markItUp .markItUpButton12 a {
    background-image:url(../img/fonts.png);
}

.markItUpHeader .markItUpButton12  li {

        border:1px solid white;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;
}
.markItUp .markItUpButton12 .header1 > a{
    background-image:none;
    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .markItUpButton12 .header2 > a{
    background-image:none;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header3 > a{
    background-image:none;
    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header4 > a{
    background-image:none;
    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header5 > a{
    background-image:none;
    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header6 > a{
    background-image:none;
    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
Note! Add styles to the theme you are using or to all of them.
Optional: I no longer use headers as a style, so I deleted this:

.markItUp .heading {
    border-radius: 2px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0980392), transparent);
    background-repeat: repeat-x;
    background-color: @markItUpHeadingBg;
    color: @markItUpHeadingColor;
    border-color: rgba(0, 0, 0, 0.298039);
    .transition(0.3s linear box-shadow);
    padding-bottom: 0px;
    padding-top: 2px;
    padding-right: 4px;
    margin-left: 10px;
    margin-top: 7px;
    position: absolute;
    left: 280px;    
}


.markItUpHeader .heading:hover {

    border-color: @markItUpHeadingHoverBorder;
}

.markItUp .heading:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));

}

.markItUpHeader .heading > a{

    text-indent: 0;
    width: 50px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    color: @markItUpHeading_A_color;
}


.markItUpHeader > ul > li > a {

    background-size: contain;
}

.markItUp .heading > ul > li > a {

    width: 100%;

}

.markItUp .heading .header1 > a{

    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .heading .header2 > a{

    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header3 > a{

    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header4 > a{

    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header5 > a{

    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header6 > a{

    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}


.markItUpHeader .heading ul{

    background: white;
    border: 1px solid @markItUpHeaderHeadingUlBorder;
    top: 23px;
    left: -1px;
    padding: 6px 0px;
    width: 200px;
    z-index:300;

}

.markItUpHeader .heading ul li {

    text-align: left;
    line-height: 8px;
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

That's it. You can now add 2 images colors.png and fonts.png to your theme. Default sites/default/themes/default/img. Overridte existing images if you feel like it.

Enjoy!

Kind regards from Andy and @pupsik smile