Based on your restrictions I would say this solution is fine. If you don't want to do inline styles though you could definitely consider something like either writing the color to a javascript variable or a data-* attributes on the debate element.
<script type="text/javascript">
var debateColor = '<%= debate.bg_color %>';
</script>
or the data solution:
<p class="debate" data-debate-color="<%= debate.bg_color %>';
But if it were me I would actually do the color calculation on the frontend, meaning you would basically assign the number of actions for each debate to javascript variables, and what would be done with those (a custom background color for instance, or anything else) would be determined in javascript. The color of any element just doesn't seem like something you would want to calculate on the server side unless it involves complex business logic.