KongponentsColors
TIP
All color definitions below display in the following format:
Color Name
--blue-500 (CSS variable)#1155cb (HEX value).color-blue-500 (CSS class)Blue
blue-100
--blue-100#f2f6fe.color-blue-100blue-200
--blue-200#bdd3f9.color-blue-200blue-300
--blue-300#8ab3fa.color-blue-300blue-400
--blue-400#3972d5.color-blue-400blue-500
--blue-500#1155cb.color-blue-500blue-600
--blue-600#003694.color-blue-600blue-700
--blue-700#0a2b66.color-blue-700Petrol
petrol-100
--petrol-100#eaf4fb.color-petrol-100petrol-200
--petrol-200#0364ac.color-petrol-200Purple
purple-100
--purple-100#d7d8fe.color-purple-100purple-200
--purple-200#bec0fd.color-purple-200purple-300
--purple-300#9396fc.color-purple-300purple-400
--purple-400#473cfb.color-purple-400Steel
steel-100
--steel-100#f0f4fa.color-steel-100steel-200
--steel-200#dae3f2.color-steel-200steel-300
--steel-300#a3b6d9.color-steel-300steel-400
--steel-400#7d91b3.color-steel-400steel-500
--steel-500#5c7299.color-steel-500steel-600
--steel-600#395380.color-steel-600steel-700
--steel-700#273c61.color-steel-700Red
red-100
--red-100#ffdede.color-red-100red-200
--red-200#ffcccc.color-red-200red-300
--red-300#ff9a99.color-red-300red-400
--red-400#ff7877.color-red-400red-500
--red-500#d44324.color-red-500red-600
--red-600#e50000.color-red-600red-700
--red-700#922021.color-red-700Green
green-100
--green-100#e8f8f5.color-green-100green-200
--green-200#c0f2d5.color-green-200green-300
--green-300#84e5ae.color-green-300green-400
--green-400#42d782.color-green-400green-500
--green-500#07a88d.color-green-500green-600
--green-600#008871.color-green-600green-700
--green-700#13755e.color-green-700Teal
teal-100
--teal-100#cdf1fe.color-teal-100teal-200
--teal-200#91e1fc.color-teal-200teal-300
--teal-300#169fcc.color-teal-300teal-400
--teal-400#0a7fae.color-teal-400teal-500
--teal-500#006e9d.color-teal-500Yellow
yellow-100
--yellow-100#fff3d8.color-yellow-100yellow-200
--yellow-200#ffe6ba.color-yellow-200yellow-300
--yellow-300#ffd68c.color-yellow-300yellow-400
--yellow-400#fabe5f.color-yellow-400yellow-500
--yellow-500#c67c06.color-yellow-500yellow-600
--yellow-600#a05604.color-yellow-600Grey
grey-100
--grey-100#f8f8fa.color-grey-100grey-200
--grey-200#f1f1f5.color-grey-200grey-300
--grey-300#e7e7ec.color-grey-300grey-400
--grey-400#b6b6bd.color-grey-400grey-500
--grey-500#6f7787.color-grey-500grey-600
--grey-600#3c4557.color-grey-600Black
Unlike the other colors which follow a naming style numbered lightest to darkest, blacks include variants that are named by their opacity that roughly equate their hex counterparts.
black-85
--black-85rgba(0, 0, 0, .85).color-black-85black-70
--black-70rgba(0, 0, 0, .7).color-black-70black-45
--black-45rgba(0, 0, 0, .45).color-black-45black-25
--black-25rgba(0, 0, 0, .25).color-black-25black-10
--black-10rgba(0, 0, 0, .1).color-black-10black-100
--black-100#dfdfdf.color-black-100black-200
--black-200#b1b2b1.color-black-200black-300
--black-300#6f7787.color-black-300black-400
--black-400#3c4557.color-black-400black-500
--black-500#0b172d.color-black-500White
white
--white#ffffff.color-white