Skip to content


The default colours defined in Karma CSS are as follows.

Colour Palette


Base set of colours that are required within the framework. Karma CSS by default depends on these colours being defined.


An alternative cool colour palette.


An alternative warm colour palette.


Base set of greyscale colours.

Social Media

Base set of popular social media colours.

For each defined color there are two classes created .b-{color} to set the background and the class .c-{color} to set the colour (text).

Adding Your Own Colours

You can define additional colours in your variables. Simply add the following $colors variable:

// any colours defined here will create helpers for background and text colour
// additionally you can redefine the colours in karma by adding them here too
// so adding `primary` will overwrite the primary colour.
$colors: (
    "somecolor":        rgb(0,0,0),
    "othercolor":       rgb(240,230,220)


There is a handy function you can use in your css to get a colour by its name:

.mydiv { border-color: color("primary"); }

As well as others to either lighten, darken or apply opacity

// return a colour by its name and darken it by 10%
.mydiv { background-color: color-darken("primary", 10%); }

// return a colour by its name and lighten it by 10%
.mydiv { background-color: color-lighten("primary", 10%); }

// return a colour by its name and apply an alpha of .8
.mydiv { background-color: color-a("primary", .8); }