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>