Loop wordpress with colored div

Good morning! I'm creating a website for a gym where you have a menu of modalities. I made a custom post in wp to create the modalities, but my problem is when it comes to calling modalities, since each modality has a specific color.

Example: Jiujitsu = black box | Bodybuilding = Box Orange and so on.

Here is the image of how my loop would list:

Myloopisbringingallmodalities,butthedivisonly1color.

Followthecodeinmyloop:

<articleclass="col-sm-8 modalidades-total"> 
        <?php 
                            $query_modalidades = array( 'post_type' => 'Modalidade');
                            $modLoop = new WP_Query( $query_modalidades ); 

                            while ($modLoop->have_posts()) : $modLoop->the_post();
                            $id = get_the_ID();
                            ?>             
            <h1><a data-toggle="collapse" href="#<?php echo $id; ?>" aria-expanded="false" aria-controls="collapseExample"><?php the_title(); ?></a></h1>                
           <div id="<?php echo $id; ?>" class="collapse modalidades-content" role="tabpanel">
                <div class="row">
                    <div class="col-sm-2 menu-modalidades">
                        <ul>
                            <li><a href="#">Sobre</a></li>
                            <li><a href="#">Professores</a></li>
                            <li><a href="#">Horários</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-10">
                        <figure><?php if ( has_post_thumbnail() ) { 
                the_post_thumbnail( 'full', array( 'class' => 'img-responsive center-block' ) ); } ?></figure>

                        <div class="row">
                            <div class="col-sm-6">
                                <h2>Sobre</h2>
                                <p><?php the_field('sobre'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Caracteristicas</h2>
                                <p><?php the_field('caracteristicas'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Treinadores</h2>
                                <p><?php the_field('treinadores'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Investimento</h2>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
             <?php endwhile; wp_reset_postdata(); ?>
        </article>

As listed in the image, each mode has its specific color! could anyone give me a help there in this loop?