javascript - render components with user selected colors -

i have form ask users color specific project, being stored string in model represents hex value (e.g: #fff).

what i'd able render page components using color , avoid using inline styles this:

<h2 style="color: <%= project.color %>;"><%= project.client.upcase %></h2> 

as colors predefined (there might list of 10 predefined colors) thinking store class names instead. however, doing have maintain list of colors in more 1 place:

• i have validate color class specified user in list, i'd need list in backend code
• i need list of colors defined in sass
• and need list of colors in javascript color picker

another problem have when storing hex values when want use different shade of color:

<div class="progress" style="background-color: <%= project.color %>">   <div class="progress-bar" style="width: 40%; background-color: <%= project.color %>;">   </div> </div> 

in case first div have lighter version of color, use sass ligthen this, can't using inline styles.

i looked this question won't recompile sass per request slow.

i using color in lot of components, flexible way of achieving this?

so, opted storing class names in database, in markup this:

<div class="project project-color-<%= project.color %>">   <div class="element">a div</div>   <div class="another">another div</div> </div> 

then in sass, i'm storing map of colors:

$project-colors: (   pomegranate:          $pomegranate,   razzmatazz:           $razzmatazz,   purple-heart:         $purple-heart,   cool-blue:            $cool-blue,   deep-sky-blue:        $deep-sky-blue,   iris-blue:            $iris-blue,   gossamer:             $gossamer ); 

and create these classes dynamically:

.project {   @each $name, $color in $project-colors {     &.project-card-#{$name} {       .element {         background-color: $color;       }        .another {         color: $color;       }     }   } }