Color

The color property specifies the color of text.
Class
Properties
color-grey
color.$grey
color-white
color: white
color-black
color: black
color-text
color: theme('color', 'text')
color-primary
color: theme('color', 'primary')
color-success
color: theme('color', 'success')
color-warning
color: theme('color', 'warning')
color-error
color: theme('color', 'error')
color-dark
color: theme('color', 'dark')
Color Palette
Color Lighten Darken
Primary
color-primary-lighten-50 color-primary-lighten-45 color-primary-lighten-40 color-primary-lighten-35 color-primary-lighten-30 color-primary-lighten-25 color-primary-lighten-20 color-primary-lighten-15 color-primary-lighten-10 color-primary-lighten-5
color-primary-darken-5 color-primary-darken-10 color-primary-darken-15 color-primary-darken-20 color-primary-darken-25 color-primary-darken-30 color-primary-darken-35 color-primary-darken-40 color-primary-darken-45 color-primary-darken-50
Success
color-success-lighten-50 color-success-lighten-45 color-success-lighten-40 color-success-lighten-35 color-success-lighten-30 color-success-lighten-25 color-success-lighten-20 color-success-lighten-15 color-success-lighten-10 color-success-lighten-5
color-success-darken-5 color-success-darken-10 color-success-darken-15 color-success-darken-20 color-success-darken-25 color-success-darken-30 color-success-darken-35 color-success-darken-40 color-success-darken-45 color-success-darken-50
Warning
color-warning-lighten-50 color-warning-lighten-45 color-warning-lighten-40 color-warning-lighten-35 color-warning-lighten-30 color-warning-lighten-25 color-warning-lighten-20 color-warning-lighten-15 color-warning-lighten-10 color-warning-lighten-5
color-warning-darken-5 color-warning-darken-10 color-warning-darken-15 color-warning-darken-20 color-warning-darken-25 color-warning-darken-30 color-warning-darken-35 color-warning-darken-40 color-warning-darken-45 color-warning-darken-50
Error
color-error-lighten-50 color-error-lighten-45 color-error-lighten-40 color-error-lighten-35 color-error-lighten-30 color-error-lighten-25 color-error-lighten-20 color-error-lighten-15 color-error-lighten-10 color-error-lighten-5
color-error-darken-5 color-error-darken-10 color-error-darken-15 color-error-darken-20 color-error-darken-25 color-error-darken-30 color-error-darken-35 color-error-darken-40 color-error-darken-45 color-error-darken-50
Text
color-text-lighten-50 color-text-lighten-45 color-text-lighten-40 color-text-lighten-35 color-text-lighten-30 color-text-lighten-25 color-text-lighten-20 color-text-lighten-15 color-text-lighten-10 color-text-lighten-5
color-text-darken-5 color-text-darken-10 color-text-darken-15 color-text-darken-20 color-text-darken-25 color-text-darken-30 color-text-darken-35 color-text-darken-40 color-text-darken-45 color-text-darken-50
Grey
color-grey-lighten-50 color-grey-lighten-45 color-grey-lighten-40 color-grey-lighten-35 color-grey-lighten-30 color-grey-lighten-25 color-grey-lighten-20 color-grey-lighten-15 color-grey-lighten-10 color-grey-lighten-5
color-grey-darken-5 color-grey-darken-10 color-grey-darken-15 color-grey-darken-20 color-grey-darken-25 color-grey-darken-30 color-grey-darken-35 color-grey-darken-40 color-grey-darken-45 color-grey-darken-50
White
color-white
color-white-darken-5 color-white-darken-10 color-white-darken-15 color-white-darken-20 color-white-darken-25 color-white-darken-30 color-white-darken-35 color-white-darken-40 color-white-darken-45 color-white-darken-50
Black
color-black-lighten-50 color-black-lighten-45 color-black-lighten-40 color-black-lighten-35 color-black-lighten-30 color-black-lighten-25 color-black-lighten-20 color-black-lighten-15 color-black-lighten-10 color-black-lighten-5
color-black
utilities.scss API
'color': (
    'enabled'    : true, // true or false
    'property'   : 'color', // css property name (don't change it !)
    'prefix'     : 'color-', // prefix of class name
    'specificity': !important, // or null
    'unit'       : null, // length/angle units (px, rem, em, %, vh, vw etc)
    'args'       : null, // for extra variables
    'palette'    : (
        'shade-step': 5,
        'max-range' : 50
    ),
    'variables': (
        // class name (suffix), value
        ("grey", color.$grey),
        ("white", white),
        ("black", black),
        ("text", theme('color', 'text')),
        ("primary", theme('color', 'primary')),
        ("success", theme('color', 'success')),
        ("warning", theme('color', 'warning')),
        ("error", theme('color', 'error')),
        ("dark", theme('color', 'dark'))
    )
)