CSS for KIT Colors

kitcolors.css

.bg-kit-blue { background: rgb(70,100,170) }
.bg-kit-blue-100 { background: rgb(70,100,170) }
.bg-kit-blue-70 { background: rgb(125,146,195) }
.bg-kit-blue-50 { background: rgb(162,177,212) }
.bg-kit-blue-30 { background: rgb(199,208,229) }
.bg-kit-blue-15 { background: rgb(227,231,242) }
.fg-kit-blue { color: rgb(70,100,170) }
.fg-kit-blue-100 { color: rgb(70,100,170) }
.fg-kit-blue-70 { color: rgb(125,146,195) }
.fg-kit-blue-50 { color: rgb(162,177,212) }
.fg-kit-blue-30 { color: rgb(199,208,229) }
.fg-kit-blue-15 { color: rgb(227,231,242) }
.bg-kit-orange { background: rgb(223,155,27) }
.bg-kit-orange-100 { background: rgb(223,155,27) }
.bg-kit-orange-70 { background: rgb(232,185,95) }
.bg-kit-orange-50 { background: rgb(239,205,141) }
.bg-kit-orange-30 { background: rgb(245,225,186) }
.bg-kit-orange-15 { background: rgb(250,240,220) }
.fg-kit-orange { color: rgb(223,155,27) }
.fg-kit-orange-100 { color: rgb(223,155,27) }
.fg-kit-orange-70 { color: rgb(232,185,95) }
.fg-kit-orange-50 { color: rgb(239,205,141) }
.fg-kit-orange-30 { color: rgb(245,225,186) }
.fg-kit-orange-15 { color: rgb(250,240,220) }
.bg-kit-green { background: rgb(0,150,130) }
.bg-kit-green-100 { background: rgb(0,150,130) }
.bg-kit-green-70 { background: rgb(76,181,167) }
.bg-kit-green-50 { background: rgb(127,202,192) }
.bg-kit-green-30 { background: rgb(178,223,217) }
.bg-kit-green-15 { background: rgb(216,239,236) }
.fg-kit-green { color: rgb(0,150,130) }
.fg-kit-green-100 { color: rgb(0,150,130) }
.fg-kit-green-70 { color: rgb(76,181,167) }
.fg-kit-green-50 { color: rgb(127,202,192) }
.fg-kit-green-30 { color: rgb(178,223,217) }
.fg-kit-green-15 { color: rgb(216,239,236) }
.bg-kit-red { background: rgb(162,34,35) }
.bg-kit-red-100 { background: rgb(162,34,35) }
.bg-kit-red-70 { background: rgb(189,100,101) }
.bg-kit-red-50 { background: rgb(208,144,145) }
.bg-kit-red-30 { background: rgb(227,188,189) }
.bg-kit-red-15 { background: rgb(241,221,222) }
.fg-kit-red { color: rgb(162,34,35) }
.fg-kit-red-100 { color: rgb(162,34,35) }
.fg-kit-red-70 { color: rgb(189,100,101) }
.fg-kit-red-50 { color: rgb(208,144,145) }
.fg-kit-red-30 { color: rgb(227,188,189) }
.fg-kit-red-15 { color: rgb(241,221,222) }
.bg-kit-cyan { background: rgb(35,161,224) }
.bg-kit-cyan-100 { background: rgb(35,161,224) }
.bg-kit-cyan-70 { background: rgb(101,189,233) }
.bg-kit-cyan-50 { background: rgb(145,208,239) }
.bg-kit-cyan-30 { background: rgb(189,226,245) }
.bg-kit-cyan-15 { background: rgb(222,240,250) }
.fg-kit-cyan { color: rgb(35,161,224) }
.fg-kit-cyan-100 { color: rgb(35,161,224) }
.fg-kit-cyan-70 { color: rgb(101,189,233) }
.fg-kit-cyan-50 { color: rgb(145,208,239) }
.fg-kit-cyan-30 { color: rgb(189,226,245) }
.fg-kit-cyan-15 { color: rgb(222,240,250) }
.bg-kit-brown { background: rgb(167,130,46) }
.bg-kit-brown-100 { background: rgb(167,130,46) }
.bg-kit-brown-70 { background: rgb(193,167,108) }
.bg-kit-brown-50 { background: rgb(211,192,150) }
.bg-kit-brown-30 { background: rgb(228,217,192) }
.bg-kit-brown-15 { background: rgb(241,236,223) }
.fg-kit-brown { color: rgb(167,130,46) }
.fg-kit-brown-100 { color: rgb(167,130,46) }
.fg-kit-brown-70 { color: rgb(193,167,108) }
.fg-kit-brown-50 { color: rgb(211,192,150) }
.fg-kit-brown-30 { color: rgb(228,217,192) }
.fg-kit-brown-15 { color: rgb(241,236,223) }
.bg-kit-maigreen { background: rgb(140,182,60) }
.bg-kit-maigreen-100 { background: rgb(140,182,60) }
.bg-kit-maigreen-70 { background: rgb(174,203,118) }
.bg-kit-maigreen-50 { background: rgb(197,218,157) }
.bg-kit-maigreen-30 { background: rgb(220,233,196) }
.bg-kit-maigreen-15 { background: rgb(237,244,225) }
.fg-kit-maigreen { color: rgb(140,182,60) }
.fg-kit-maigreen-100 { color: rgb(140,182,60) }
.fg-kit-maigreen-70 { color: rgb(174,203,118) }
.fg-kit-maigreen-50 { color: rgb(197,218,157) }
.fg-kit-maigreen-30 { color: rgb(220,233,196) }
.fg-kit-maigreen-15 { color: rgb(237,244,225) }
.bg-kit-lila { background: rgb(163,16,124) }
.bg-kit-lila-100 { background: rgb(163,16,124) }
.bg-kit-lila-70 { background: rgb(190,87,163) }
.bg-kit-lila-50 { background: rgb(209,135,189) }
.bg-kit-lila-30 { background: rgb(227,183,215) }
.bg-kit-lila-15 { background: rgb(241,219,235) }
.fg-kit-lila { color: rgb(163,16,124) }
.fg-kit-lila-100 { color: rgb(163,16,124) }
.fg-kit-lila-70 { color: rgb(190,87,163) }
.fg-kit-lila-50 { color: rgb(209,135,189) }
.fg-kit-lila-30 { color: rgb(227,183,215) }
.fg-kit-lila-15 { color: rgb(241,219,235) }
.bg-kit-yellow { background: rgb(252,229,0) }
.bg-kit-yellow-100 { background: rgb(252,229,0) }
.bg-kit-yellow-70 { background: rgb(252,236,76) }
.bg-kit-yellow-50 { background: rgb(253,242,127) }
.bg-kit-yellow-30 { background: rgb(254,247,178) }
.bg-kit-yellow-15 { background: rgb(254,251,216) }
.fg-kit-yellow { color: rgb(252,229,0) }
.fg-kit-yellow-100 { color: rgb(252,229,0) }
.fg-kit-yellow-70 { color: rgb(252,236,76) }
.fg-kit-yellow-50 { color: rgb(253,242,127) }
.fg-kit-yellow-30 { color: rgb(254,247,178) }
.fg-kit-yellow-15 { color: rgb(254,251,216) }

kitcolors.py

#!/usr/bin/python 

WHITE=(255,255,255)

COLORS = {
    'green': (0,150,130),
    'blue': (70,100,170),
    'maigreen':(140,182,60),
    'yellow':(252,229,0),
    'orange': (223,155,27),
    'brown':(167,130,46),
    'red':(162,34,35),
    'lila':(163,16,124),
    'cyan':(35,161,224)
}

TYPE = {
    'fg' : 'color',
    'bg' : 'background',
}

STEPS = (100,70,50,30,15)

from itertools import starmap

def interpolate(c1, c2, a):
    a /= 100.0
    b = 1.0 - a
    
    def mix(x,y):
        return x*a+y*b
    
    return tuple(starmap(mix, zip(c1,c2)))

for name, color in COLORS.items():
    for typ, attrib in TYPE.items():
        r,g,b=color
        print ".%s-kit-%s { %s: rgb(%d,%d,%d) }" %\
             (typ,name,attrib,r,g,b)
             
        for step in STEPS:
            r, g, b = interpolate(color, WHITE, step)
            print ".%s-kit-%s-%d { %s: rgb(%d,%d,%d) }" \
                % (typ, name, step, attrib, r, g, b)