GitHub

Colors

List of colors and utility CSS classes.

Theme Colors

These are the root theme colors. Each theme has its own color values assigned. Change the theme to preview them.

--rz-white
--rz-base-50
--rz-base-100
--rz-base-200
--rz-base-300
--rz-base-400
--rz-base-500
--rz-base-600
--rz-base-700
--rz-base-800
--rz-base-900
--rz-black
--rz-primary-lighter
--rz-primary-light
--rz-primary
--rz-primary-dark
--rz-primary-darker
--rz-secondary-lighter
--rz-secondary-light
--rz-secondary
--rz-secondary-dark
--rz-secondary-darker
--rz-info-lighter
--rz-info-light
--rz-info
--rz-info-dark
--rz-info-darker
--rz-success-lighter
--rz-success-light
--rz-success
--rz-success-dark
--rz-success-darker
--rz-warning-lighter
--rz-warning-light
--rz-warning
--rz-warning-dark
--rz-warning-darker
--rz-danger-lighter
--rz-danger-light
--rz-danger
--rz-danger-dark
--rz-danger-darker
--rz-series-1
--rz-series-2
--rz-series-3
--rz-series-4
--rz-series-5
--rz-series-6
--rz-series-7
--rz-series-8

Utility CSS Classes

Use these classes to set background, text or border colors. E.g. class="rz-background-color-secondary"

Background-color
.rz-background-color-white
.rz-background-color-base-50
.rz-background-color-base-100
.rz-background-color-base-200
.rz-background-color-base-300
.rz-background-color-base-400
.rz-background-color-base-500
.rz-background-color-base-600
.rz-background-color-base-700
.rz-background-color-base-800
.rz-background-color-base-900
.rz-background-color-black
.rz-background-color-primary-lighter
.rz-background-color-primary-light
.rz-background-color-primary
.rz-background-color-primary-dark
.rz-background-color-primary-darker
.rz-background-color-secondary-lighter
.rz-background-color-secondary-light
.rz-background-color-secondary
.rz-background-color-secondary-dark
.rz-background-color-secondary-darker
.rz-background-color-info-lighter
.rz-background-color-info-light
.rz-background-color-info
.rz-background-color-info-dark
.rz-background-color-info-darker
.rz-background-color-success-lighter
.rz-background-color-success-light
.rz-background-color-success
.rz-background-color-success-dark
.rz-background-color-success-darker
.rz-background-color-warning-lighter
.rz-background-color-warning-light
.rz-background-color-warning
.rz-background-color-warning-dark
.rz-background-color-warning-darker
.rz-background-color-danger-lighter
.rz-background-color-danger-light
.rz-background-color-danger
.rz-background-color-danger-dark
.rz-background-color-danger-darker
.rz-background-color-series-1
.rz-background-color-series-2
.rz-background-color-series-3
.rz-background-color-series-4
.rz-background-color-series-5
.rz-background-color-series-6
.rz-background-color-series-7
.rz-background-color-series-8
Color on white
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Color on black
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Border-color
.rz-border-color-white
.rz-border-color-base-50
.rz-border-color-base-100
.rz-border-color-base-200
.rz-border-color-base-300
.rz-border-color-base-400
.rz-border-color-base-500
.rz-border-color-base-600
.rz-border-color-base-700
.rz-border-color-base-800
.rz-border-color-base-900
.rz-border-color-black
.rz-border-color-primary-lighter
.rz-border-color-primary-light
.rz-border-color-primary
.rz-border-color-primary-dark
.rz-border-color-primary-darker
.rz-border-color-secondary-lighter
.rz-border-color-secondary-light
.rz-border-color-secondary
.rz-border-color-secondary-dark
.rz-border-color-secondary-darker
.rz-border-color-info-lighter
.rz-border-color-info-light
.rz-border-color-info
.rz-border-color-info-dark
.rz-border-color-info-darker
.rz-border-color-success-lighter
.rz-border-color-success-light
.rz-border-color-success
.rz-border-color-success-dark
.rz-border-color-success-darker
.rz-border-color-warning-lighter
.rz-border-color-warning-light
.rz-border-color-warning
.rz-border-color-warning-dark
.rz-border-color-warning-darker
.rz-border-color-danger-lighter
.rz-border-color-danger-light
.rz-border-color-danger
.rz-border-color-danger-dark
.rz-border-color-danger-darker
.rz-border-color-series-1
.rz-border-color-series-2
.rz-border-color-series-3
.rz-border-color-series-4
.rz-border-color-series-5
.rz-border-color-series-6
.rz-border-color-series-7
.rz-border-color-series-8

Source Code licensed under MIT