turretcss
Color
Color Inherit
Current Color
Base Color
<p class="color-inherit">...</p>
<p class="current-color">...</p>
<p class="color">...</p>
White
Black
<p class="color-white">...</p>
<p class="color-black">...</p>
Shades
Light
Light
Light 50
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900
<p class="color-light">...</p>
<p class="color-light-50">...</p>
<p class="color-light-100">...</p>
<p class="color-light-200">...</p>
<p class="color-light-300">...</p>
<p class="color-light-400">...</p>
<p class="color-light-500">...</p>
<p class="color-light-600">...</p>
<p class="color-light-700">...</p>
<p class="color-light-800">...</p>
<p class="color-light-900">...</p>
Grey
Grey
Grey 50
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
<p class="color-grey">...</p>
<p class="color-grey-50">...</p>
<p class="color-grey-100">...</p>
<p class="color-grey-200">...</p>
<p class="color-grey-300">...</p>
<p class="color-grey-400">...</p>
<p class="color-grey-500">...</p>
<p class="color-grey-600">...</p>
<p class="color-grey-700">...</p>
<p class="color-grey-800">...</p>
<p class="color-grey-900">...</p>
Dark
Dark
Dark 50
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900
<p class="color-dark">...</p>
<p class="color-dark-50">...</p>
<p class="color-dark-100">...</p>
<p class="color-dark-200">...</p>
<p class="color-dark-300">...</p>
<p class="color-dark-400">...</p>
<p class="color-dark-500">...</p>
<p class="color-dark-600">...</p>
<p class="color-dark-700">...</p>
<p class="color-dark-800">...</p>
<p class="color-dark-900">...</p>
Palettes
Primary
Primary
Primary 50
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
<p class="color-primary">...</p>
<p class="color-primary-50">...</p>
<p class="color-primary-100">...</p>
<p class="color-primary-200">...</p>
<p class="color-primary-300">...</p>
<p class="color-primary-400">...</p>
<p class="color-primary-500">...</p>
<p class="color-primary-600">...</p>
<p class="color-primary-700">...</p>
<p class="color-primary-800">...</p>
<p class="color-primary-900">...</p>
Secondary
Secondary
Secondary 50
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
<p class="color-secondary">...</p>
<p class="color-secondary-50">...</p>
<p class="color-secondary-100">...</p>
<p class="color-secondary-200">...</p>
<p class="color-secondary-300">...</p>
<p class="color-secondary-400">...</p>
<p class="color-secondary-500">...</p>
<p class="color-secondary-600">...</p>
<p class="color-secondary-700">...</p>
<p class="color-secondary-800">...</p>
<p class="color-secondary-900">...</p>
Tertiary
Tertiary
Tertiary 50
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900
<p class="color-tertiary">...</p>
<p class="color-tertiary-50">...</p>
<p class="color-tertiary-100">...</p>
<p class="color-tertiary-200">...</p>
<p class="color-tertiary-300">...</p>
<p class="color-tertiary-400">...</p>
<p class="color-tertiary-500">...</p>
<p class="color-tertiary-600">...</p>
<p class="color-tertiary-700">...</p>
<p class="color-tertiary-800">...</p>
<p class="color-tertiary-900">...</p>
Indicators
Info
Info
Info 50
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900
<p class="color-info">...</p>
<p class="color-info-50">...</p>
<p class="color-info-100">...</p>
<p class="color-info-200">...</p>
<p class="color-info-300">...</p>
<p class="color-info-400">...</p>
<p class="color-info-500">...</p>
<p class="color-info-600">...</p>
<p class="color-info-700">...</p>
<p class="color-info-800">...</p>
<p class="color-info-900">...</p>
Error
Error
Error 50
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900
<p class="color-error">...</p>
<p class="color-error-50">...</p>
<p class="color-error-100">...</p>
<p class="color-error-200">...</p>
<p class="color-error-300">...</p>
<p class="color-error-400">...</p>
<p class="color-error-500">...</p>
<p class="color-error-600">...</p>
<p class="color-error-700">...</p>
<p class="color-error-800">...</p>
<p class="color-error-900">...</p>
Warning
Warning
Warning 50
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
<p class="color-warning">...</p>
<p class="color-warning-50">...</p>
<p class="color-warning-100">...</p>
<p class="color-warning-200">...</p>
<p class="color-warning-300">...</p>
<p class="color-warning-400">...</p>
<p class="color-warning-500">...</p>
<p class="color-warning-600">...</p>
<p class="color-warning-700">...</p>
<p class="color-warning-800">...</p>
<p class="color-warning-900">...</p>
Success
Success
Success 50
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
<p class="color-success">...</p>
<p class="color-success-50">...</p>
<p class="color-success-100">...</p>
<p class="color-success-200">...</p>
<p class="color-success-300">...</p>
<p class="color-success-400">...</p>
<p class="color-success-500">...</p>
<p class="color-success-600">...</p>
<p class="color-success-700">...</p>
<p class="color-success-800">...</p>
<p class="color-success-900">...</p>