Shipyard includes 9 standard colors by default, and each color can be accessed with the corresponding CSS utility class .color-shade or by using the SASS variable $color-shade in your SASS files.
.gray-lightest
.gray-lighter
.gray-light
.gray
.gray-dark
.gray-darker
.gray-darkest
.blue-lightest
.blue-lighter
.blue-light
.blue
.blue-dark
.blue-darker
.blue-darkest
.teal-lightest
.teal-lighter
.teal-light
.teal
.teal-dark
.teal-darker
.teal-darkest
.green-lightest
.green-lighter
.green-light
.green
.green-dark
.green-darker
.green-darkest
.yellow-lightest
.yellow-lighter
.yellow-light
.yellow
.yellow-dark
.yellow-darker
.yellow-darkest
.orange-lightest
.orange-lighter
.orange-light
.orange
.orange-dark
.orange-darker
.orange-darkest
.red-lightest
.red-lighter
.red-light
.red
.red-dark
.red-darker
.red-darkest
.coral-lightest
.coral-lighter
.coral-light
.coral
.coral-dark
.coral-darker
.coral-darkest
.purple-lightest
.purple-lighter
.purple-light
.purple
.purple-dark
.purple-darker
.purple-darkest
.black
.white
.black { color: #000 }
.black-90 { color: rgba(0,0,0,0.9) }
.black-80 { color: rgba(0,0,0,0.8) }
.black-70 { color: rgba(0,0,0,0.7) }
.black-60 { color: rgba(0,0,0,0.6) }
.black-50 { color: rgba(0,0,0,0.5) }
.black-40 { color: rgba(0,0,0,0.4) }
.black-30 { color: rgba(0,0,0,0.3) }
.white { color: #fff }
.white-90 { color: rgba(255,255,255,0.9) }
.white-80 { color: rgba(255,255,255,0.8) }
.white-70 { color: rgba(255,255,255,0.7) }
.white-60 { color: rgba(255,255,255,0.6) }
.white-50 { color: rgba(255,255,255,0.5) }
.white-40 { color: rgba(255,255,255,0.4) }
.white-30 { color: rgba(255,255,255,0.3) }
.gray { color: #788594 }
.gray-light { color: #bac5d2 }
.gray-lighter { color: #dfe6eb }
.gray-lightest { color: #f2f5f7 }
.gray-dark { color: #4e5762 }
.gray-darker { color: #313a44 }
.gray-darkest { color: #1e252c }
.green { color: #33c474 }
.green-light { color: #93e3b7 }
.green-lighter { color: #c4f0d8 }
.green-lightest { color: #e0f7ea }
.green-dark { color: #238750 }
.green-darker { color: #1b673d }
.green-darkest { color: #144e2f }
.blue { color: #1ca1e3 }
.blue-light { color: #a0d6f0 }
.blue-lighter { color: #c8e9f9 }
.blue-lightest { color: #e3f4fc }
.blue-dark { color: #0075b0 }
.blue-darker { color: #005d8c }
.blue-darkest { color: #003c5a }
.teal { color: #20a5a8 }
.teal-light { color: #6ab7b9 }
.teal-lighter { color: #b2dbdc }
.teal-lightest { color: #e0f0f1 }
.teal-dark { color: #198386 }
.teal-darker { color: #136263 }
.teal-darkest { color: #0c4041 }
.red { color: #e06158 }
.red-light { color: #e6827a }
.red-lighter { color: #eda29d }
.red-lightest { color: #fae3e2 }
.red-dark { color: #b13b39 }
.red-darker { color: #892120 }
.red-darkest { color: #681918 }
.yellow { color: #ffca49 }
.yellow-light { color: #ffd672 }
.yellow-lighter { color: #ffe7b1 }
.yellow-lightest { color: #fff2d5 }
.yellow-dark { color: #e2a000 }
.yellow-darker { color: #af7c00 }
.yellow-darkest { color: #583f00 }
.orange { color: #ff9f49 }
.orange-light { color: #ffb26d }
.orange-lighter { color: #ffc590 }
.orange-lightest { color: #ffd7b4 }
.orange-dark { color: #d6863f }
.orange-darker { color: #c66c1c }
.orange-darkest { color: #a2530d }
.purple { color: #bf8df6 }
.purple-light { color: #dabcfa }
.purple-lighter { color: #e7d4fc }
.purple-lightest { color: #f4ecfd }
.purple-dark { color: #8c56c7 }
.purple-darker { color: #66349d }
.purple-darkest { color: #402163 }
.coral { color: #f9657a }
.coral-light { color: #fb8c9c }
.coral-lighter { color: #fcb4be }
.coral-lightest { color: #fee0e4 }
.coral-dark { color: #c33549 }
.coral-darker { color: #a52033 }
.coral-darkest { color: #821020 }
.text-darkest { color: #162b44 }
.text-darker { color: rgba(22,43,68,0.9) }
.text-dark { color: rgba(22,43,68,0.8) }
.text-normal { color: rgba(22,43,68,0.7) }
.text-light { color: rgba(22,43,68,0.6) }
.text-lighter { color: rgba(22,43,68,0.5) }
.text-lightest { color: rgba(22,43,68,0.4) }
.bg-black { background-color: #000 }
.bg-black-90 { background-color: rgba(0,0,0,0.9) }
.bg-black-80 { background-color: rgba(0,0,0,0.8) }
.bg-black-70 { background-color: rgba(0,0,0,0.7) }
.bg-black-60 { background-color: rgba(0,0,0,0.6) }
.bg-black-50 { background-color: rgba(0,0,0,0.5) }
.bg-black-40 { background-color: rgba(0,0,0,0.4) }
.bg-black-30 { background-color: rgba(0,0,0,0.3) }
.bg-white { background-color: #fff }
.bg-white-90 { background-color: rgba(255,255,255,0.9) }
.bg-white-80 { background-color: rgba(255,255,255,0.8) }
.bg-white-70 { background-color: rgba(255,255,255,0.7) }
.bg-white-60 { background-color: rgba(255,255,255,0.6) }
.bg-white-50 { background-color: rgba(255,255,255,0.5) }
.bg-white-40 { background-color: rgba(255,255,255,0.4) }
.bg-white-30 { background-color: rgba(255,255,255,0.3) }
.bg-gray { background-color: #788594 }
.bg-gray-light { background-color: #bac5d2 }
.bg-gray-lighter { background-color: #dfe6eb }
.bg-gray-lightest { background-color: #f2f5f7 }
.bg-gray-dark { background-color: #4e5762 }
.bg-gray-darker { background-color: #313a44 }
.bg-gray-darkest { background-color: #1e252c }
.bg-green { background-color: #33c474 }
.bg-green-light { background-color: #93e3b7 }
.bg-green-lighter { background-color: #c4f0d8 }
.bg-green-lightest { background-color: #e0f7ea }
.bg-green-dark { background-color: #238750 }
.bg-green-darker { background-color: #1b673d }
.bg-green-darkest { background-color: #144e2f }
.bg-blue { background-color: #1ca1e3 }
.bg-blue-light { background-color: #a0d6f0 }
.bg-blue-lighter { background-color: #c8e9f9 }
.bg-blue-lightest { background-color: #e3f4fc }
.bg-blue-dark { background-color: #0075b0 }
.bg-blue-darker { background-color: #005d8c }
.bg-blue-darkest { background-color: #003c5a }
.bg-teal { background-color: #20a5a8 }
.bg-teal-light { background-color: #6ab7b9 }
.bg-teal-lighter { background-color: #b2dbdc }
.bg-teal-lightest { background-color: #e0f0f1 }
.bg-teal-dark { background-color: #198386 }
.bg-teal-darker { background-color: #136263 }
.bg-teal-darkest { background-color: #0c4041 }
.bg-red { background-color: #e06158 }
.bg-red-light { background-color: #e6827a }
.bg-red-lighter { background-color: #eda29d }
.bg-red-lightest { background-color: #fae3e2 }
.bg-red-dark { background-color: #b13b39 }
.bg-red-darker { background-color: #892120 }
.bg-red-darkest { background-color: #681918 }
.bg-yellow { background-color: #ffca49 }
.bg-yellow-light { background-color: #ffd672 }
.bg-yellow-lighter { background-color: #ffe7b1 }
.bg-yellow-lightest { background-color: #fff2d5 }
.bg-yellow-dark { background-color: #e2a000 }
.bg-yellow-darker { background-color: #af7c00 }
.bg-yellow-darkest { background-color: #583f00 }
.bg-orange { background-color: #ff9f49 }
.bg-orange-light { background-color: #ffb26d }
.bg-orange-lighter { background-color: #ffc590 }
.bg-orange-lightest { background-color: #ffd7b4 }
.bg-orange-dark { background-color: #d6863f }
.bg-orange-darker { background-color: #c66c1c }
.bg-orange-darkest { background-color: #a2530d }
.bg-purple { background-color: #bf8df6 }
.bg-purple-light { background-color: #dabcfa }
.bg-purple-lighter { background-color: #e7d4fc }
.bg-purple-lightest { background-color: #f4ecfd }
.bg-purple-dark { background-color: #8c56c7 }
.bg-purple-darker { background-color: #66349d }
.bg-purple-darkest { background-color: #402163 }
.bg-coral { background-color: #f9657a }
.bg-coral-light { background-color: #fb8c9c }
.bg-coral-lighter { background-color: #fcb4be }
.bg-coral-lightest { background-color: #fee0e4 }
.bg-coral-dark { background-color: #c33549 }
.bg-coral-darker { background-color: #a52033 }
.bg-coral-darkest { background-color: #821020 }
.bg-text-darkest { background-color: #162b44 }
.bg-text-darker { background-color: rgba(22,43,68,0.9) }
.bg-text-dark { background-color: rgba(22,43,68,0.8) }
.bg-text-normal { background-color: rgba(22,43,68,0.7) }
.bg-text-light { background-color: rgba(22,43,68,0.6) }
.bg-text-lighter { background-color: rgba(22,43,68,0.5) }
.bg-text-lightest { background-color: rgba(22,43,68,0.4) }