A CSS snippet with WOLA's brand color palette, with functional classes for backgrounds, hovers, and borders.

wola-colors.css

.wola-blue { color: #00b5ef; }
.bg-wola-blue { background-color: #00b5ef; }
.b--wola-blue { border-color: #00b5ef; }

.hover-wola-blue:hover,
.hover-wola-blue:focus { color: #00b5ef; }

.hover-bg-wola-blue:hover,
.hover-bg-wola-blue:focus { background-color: #00b5ef; }

.wola-purple { color: #603F99; }
.bg-wola-purple { background-color: #603F99; }
.b--wola-purple { border-color: #603F99; }

.hover-wola-purple:hover,
.hover-wola-purple:focus { color: #603F99; }

.hover-bg-wola-purple:hover,
.hover-bg-wola-purple:focus { background-color: #603F99; }

.wola-green { color: #65BD60; }
.bg-wola-green { background-color: #65BD60; }
.b--wola-green { border-color: #65BD60; }

.hover-wola-green:hover,
.hover-wola-green:focus { color: #65BD60; }

.hover-bg-wola-green:hover,
.hover-bg-wola-green:focus { background-color: #65BD60; }

.wola-gray { color: #404041; }
.bg-wola-gray { background-color: #404041; }
.b--wola-gray { border-color: #404041; }

.hover-wola-gray:hover,
.hover-wola-gray:focus { color: #404041; }

.hover-bg-wola-gray:hover,
.hover-bg-wola-gray:focus { background-color: #404041; }

.wola-warm-gray { color: #D5D0CA; }
.bg-wola-warm-gray { background-color: #D5D0CA; }
.b--wola-warm-gray { border-color: #D5D0CA; }

.hover-wola-warm-gray:hover,
.hover-wola-warm-gray:focus { color: #D5D0CA; }

.hover-bg-wola-warm-gray:hover,
.hover-bg-wola-warm-gray:focus { background-color: #D5D0CA; }

.wola-red { color: #DA1A32; }
.bg-wola-red { background-color: #DA1A32; }
.b--wola-red { border-color: #DA1A32; }

.hover-wola-red:hover,
.hover-wola-red:focus { color: #DA1A32; }

.hover-bg-wola-red:hover,
.hover-bg-wola-red:focus { background-color: #DA1A32; }

.wola-orange { color: #F26322; }
.bg-wola-orange { background-color: #F26322; }
.b--wola-orange { border-color: #F26322; }

.hover-wola-orange:hover,
.hover-wola-orange:focus { color: #F26322; }

.hover-bg-wola-orange:hover,
.hover-bg-wola-orange:focus { background-color: #F26322; }

.wola-yellow { color: #F9C606; }
.bg-wola-yellow { background-color: #F9C606; }
.b--wola-yellow { border-color: #F9C606; }

.hover-wola-yellow:hover,
.hover-wola-yellow:focus { color: #F9C606; }

.hover-bg-wola-yellow:hover,
.hover-bg-wola-yellow:focus { background-color: #F9C606; }