Karma CSS

Colours

Colour Palette

The default colours defined in Karma CSS are as follows.

Base set of colours that are required within the framework:

white
RGB(255, 255, 255) - #ffffff
black
RGB(17, 17, 17) - #111111
primary
RGB(51, 195, 240) - #33c3f0
secondary
RGB(240, 240, 240) - #f0f0f0

An alternative cool colour palette:

aqua
RGB(127, 219, 255) - #7fdbff
blue
RGB(0, 116, 217) - #0074d9
navy
RGB(0, 31, 63) - #001f3f
teal
RGB(57, 204, 204) - #39cccc
green
RGB(46, 204, 64) - #2ecc40
olive
RGB(61, 153, 112) - #3d9970
lime
RGB(1, 255, 112) - #01ff70

An alternative warm colour palette:

yellow
RGB(255, 220, 0) - #ffdc00
orange
RGB(255, 133, 27) - #ff851b
red
RGB(255, 65, 54) - #ff4136
fuchsia
RGB(240, 18, 190) - #f012be
purple
RGB(177, 13, 201) - #b10dc9
maroon
RGB(133, 20, 75) - #85144b

Base set of greyscale colours:

silver
RGB(221, 221, 221) - #dddddd
gray
RGB(170, 170, 170) - #aaaaaa

Base set of popular social media colours:

facebook
RGB(59, 89, 153) - #3b5999
twitter
RGB(85, 172, 238) - #55acee
linkedin
RGB(0, 119, 181) - #0077b5
googleplus
RGB(221, 75, 57) - #dd4b39
instagram
RGB(228, 64, 95) - #e4405f
pinterest
RGB(189, 8, 28) - #bd081c

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)
);

Helpers

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); }