Kongponents

# Colors

Blue

blue-100 #f2f6fe .color-blue-100
blue-200 #bdd3f9 .color-blue-200
blue-300 #8ab3fa .color-blue-300
blue-400 #3972d5 .color-blue-400
blue-500 #1155cb .color-blue-500
blue-600 #003694 .color-blue-600
blue-700 #0a2b66 .color-blue-700

Petrol

petrol-100 #eaf4fb .color-petrol-100
petrol-200 #0364ac .color-petrol-200

Purple

purple-100 #d7d8fe .color-purple-100
purple-200 #bec0fd .color-purple-200
purple-300 #9396fc .color-purple-300
purple-400 #473cfb .color-purple-400

Steel

steel-100 #f0f4fa .color-steel-100
steel-200 #dae3f2 .color-steel-200
steel-300 #a3b6d9 .color-steel-300
steel-400 #7d91b3 .color-steel-400
steel-500 #5c7299 .color-steel-500
steel-600 #395380 .color-steel-600
steel-700 #273c61 .color-steel-700

Red

red-100 #ffdede .color-red-100
red-200 #fcc .color-red-200
red-300 #ff9a99 .color-red-300
red-400 #ff7877 .color-red-400
red-500 #d44324 .color-red-500
red-600 #e50000 .color-red-600
red-700 #922021 .color-red-700

Green

green-100 #e8f8f5 .color-green-100
green-200 #c0f2d5 .color-green-200
green-300 #84e5ae .color-green-300
green-400 #42d782 .color-green-400
green-500 #07a88d .color-green-500
green-600 #008871 .color-green-600
green-700 #13755e .color-green-700

Teal

teal-100 #cdf1fe .color-teal-100
teal-200 #91e1fc .color-teal-200
teal-300 #169fcc .color-teal-300
teal-400 #0a7fae .color-teal-400
teal-500 #006e9d .color-teal-500

Yellow

yellow-100 #fff3d8 .color-yellow-100
yellow-200 #ffe6ba .color-yellow-200
yellow-300 #ffd68c .color-yellow-300
yellow-400 #fabe5f .color-yellow-400
yellow-500 #c67c06 .color-yellow-500
yellow-600 #a05604 .color-yellow-600

Grey

grey-100 #f8f8fa .color-grey-100
grey-200 #f1f1f5 .color-grey-200
grey-300 #e7e7ec .color-grey-300
grey-400 #b6b6bd .color-grey-400
grey-500 #6f7787 .color-grey-500
grey-600 #3c4557 .color-grey-600

Black

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 rgba(0,0,0,0.85) .color-black-85
black-70 rgba(0,0,0,0.7) .color-black-70
black-45 rgba(0,0,0,0.45) .color-black-45
black-25 rgba(0,0,0,0.25) .color-black-25
black-10 rgba(0,0,0,0.1) .color-black-10
black-100 #dfdfdf .color-black-100
black-200 #b1b2b1 .color-black-200
black-300 #6f7787 .color-black-300
black-400 #3c4557 .color-black-400
black-500 #0b172d .color-black-500

White

white #fff .color-white

← Type →